const { SectionHeading, Button, InfoRow, PhotoFrame, Badge, Rule } = window.WhiskyNoirTheValleyBarbershop_c4fed7;
const CA = '../../assets/';

// Live availability calendar — data comes from the booking backend's
// taken_slots() function, which exposes slot occupancy and nothing else.
function AvailabilityCalendar({ lang, onBookSlot }) {
  const T = (zh, en) => lang === 'en' ? en : zh;
  const days = React.useMemo(() => window.VB.nextDays(7), []);
  const [taken, setTaken] = React.useState(null);
  const [failed, setFailed] = React.useState(false);
  const wd = ['日', '一', '二', '三', '四', '五', '六'], wdEn = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  React.useEffect(() => {
    window.VB.fetchTaken(window.VB.iso(days[0]), window.VB.iso(days[6]))
      .then(setTaken).catch(() => setFailed(true));
  }, []);
  const past = (dISO, t) => dISO === window.VB.iso(new Date()) && (+t.slice(0, 2)) <= new Date().getHours();
  return (
    <div style={{ display: 'grid', gap: 'var(--space-4)', background: 'var(--surface-card)', border: '1px solid var(--line-hairline)', borderRadius: 'var(--radius-xs)', padding: 'var(--space-6)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
        <span style={{ fontFamily: 'var(--font-han)', fontSize: 'var(--text-lg)', letterSpacing: '.12em', color: 'var(--bone-500)' }}>{T('本週時段', 'This week')}</span>
        <span style={{ font: 'var(--type-small)', color: 'var(--text-faint)' }}>{T('點選空位即可預約', 'Tap an open slot to book it')}</span>
      </div>
      {failed && <p style={{ font: 'var(--type-small)', color: 'var(--text-faint)', margin: 0 }}>{T('暫時無法讀取時段，請來電 02-2502-5009。', 'Availability is unreachable right now — call 02-2502-5009.')}</p>}
      {!failed && <div className="vb-cal">
        {days.map(d => {
          const dISO = window.VB.iso(d);
          return (
            <div key={dISO} className="vb-cal-row">
              <div style={{ display: 'grid', alignContent: 'center', gap: 2 }}>
                <span style={{ fontFamily: 'var(--font-han)', fontSize: 'var(--text-sm)', letterSpacing: '.1em', color: 'var(--bone-500)' }}>{T('週' + wd[d.getDay()], wdEn[d.getDay()])}</span>
                <span style={{ font: 'var(--type-eyebrow)', color: 'var(--text-faint)' }}>{(d.getMonth() + 1) + '/' + d.getDate()}</span>
              </div>
              {window.VB.SLOTS.map(t => {
                const gone = taken === null || (taken && taken.has(dISO + '|' + t)) || past(dISO, t);
                return (
                  <button key={t} className="vb-slot" disabled={gone} onClick={() => onBookSlot({ date: dISO, time: t })}
                    title={gone ? T('已滿', 'Booked') : T('有位', 'Open')}>
                    {taken === null ? '…' : (gone ? T('已滿', 'Full') : t)}
                  </button>
                );
              })}
            </div>
          );
        })}
      </div>}
    </div>
  );
}

function ContactScreen({ onBook, onBookSlot, lang }) {
  const c = window.VALLEY.contact;
  const T = (zh, en) => lang === 'en' ? en : zh;
  return (
    <main style={{ padding: 'var(--section-y) var(--gutter-inline)' }}>
      <div className="g2" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', gap: 'var(--space-9)', alignItems: 'start' }}>
        <div style={{ display: 'grid', gap: 'var(--space-6)' }}>
          <SectionHeading eyebrow="Contact Us" title="聯絡我們" titleEn="Three days ahead, please" />
          <div>
            <InfoRow label="Hours">{T(c.hours, c.hoursEn)}</InfoRow>
            <InfoRow label="Phone" href={c.tel}>{c.phone}</InfoRow>
            <InfoRow label="Email" href={'mailto:' + c.email}>{c.email}</InfoRow>
            <InfoRow label="Address" href={c.map}>{T(c.address, c.addressEn)}</InfoRow>
          </div>
          <Badge tone="brass">{T(c.booking, c.bookingEn)}</Badge>
        </div>
        <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
          <AvailabilityCalendar lang={lang} onBookSlot={onBookSlot} />
          <Rule />
          <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)' }}>{T('想先聊聊需求？', 'Prefer to talk it through first?')}</span>
            <Button variant="secondary" href={c.tel}>{T('打電話給我們', 'Call us')}</Button>
            <Button variant="primary" onClick={onBook}>{T('立即預約', 'Book now')}</Button>
          </div>
        </div>
      </div>
    </main>
  );
}
Object.assign(window, { ContactScreen, AvailabilityCalendar });