const { COPY: COPY_BK } = window.AF_DATA;
const { Link: LinkBK } = ReactRouterDOM;
const { useState: useStateBK } = React;

// Fake but interactive booking widget — feels like Acuity
const TIME_SLOTS = ["9:30 AM","10:00 AM","10:30 AM","11:00 AM","1:00 PM","1:30 PM","2:00 PM","2:30 PM","3:00 PM","3:30 PM","4:00 PM"];
const MONTH_NAMES = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const WEEKDAYS = ["S","M","T","W","T","F","S"];

function buildMonth(year, month) {
  const first = new Date(year, month, 1);
  const days = new Date(year, month + 1, 0).getDate();
  const startDow = first.getDay();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= days; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}

function BookingWidget() {
  const today = new Date();
  const [cursor, setCursor] = useStateBK({ y: today.getFullYear(), m: today.getMonth() });
  const [selectedDay, setSelectedDay] = useStateBK(null);
  const [selectedTime, setSelectedTime] = useStateBK(null);
  const [confirmed, setConfirmed] = useStateBK(false);

  const cells = buildMonth(cursor.y, cursor.m);
  const isCurrentMonth = cursor.y === today.getFullYear() && cursor.m === today.getMonth();

  function isDisabled(d) {
    if (!d) return true;
    const date = new Date(cursor.y, cursor.m, d);
    if (date < new Date(today.getFullYear(), today.getMonth(), today.getDate())) return true;
    if (date.getDay() === 0) return true; // Sundays closed
    // Closure: June 6–10, 2026
    if (cursor.y === 2026 && cursor.m === 5 && d >= 6 && d <= 10) return true;
    return false;
  }

  function step(dir) {
    let m = cursor.m + dir, y = cursor.y;
    if (m < 0) { m = 11; y--; }
    if (m > 11) { m = 0; y++; }
    setCursor({ y, m });
    setSelectedDay(null);
    setSelectedTime(null);
  }

  if (confirmed) {
    return (
      <div className="border hairline bg-white p-8 md:p-10 text-center">
        <div className="w-12 h-12 rounded-full bg-[#A0522D] text-white flex items-center justify-center mx-auto">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
        </div>
        <h3 className="font-display ink mt-5 text-[28px]" style={{ fontWeight: 500 }}>
          You&apos;re <em style={{ fontStyle:'italic' }} className="text-[#A0522D]">booked</em>.
        </h3>
        <p className="mt-3 body-ink">
          {MONTH_NAMES[cursor.m]} {selectedDay}, {cursor.y} &nbsp;·&nbsp; {selectedTime}
        </p>
        <p className="mt-1 text-[14px] text-[#807466]">
          We&apos;ll send a text confirmation to the number you provide.
        </p>
        <button onClick={() => { setConfirmed(false); setSelectedDay(null); setSelectedTime(null); }} className="btn-ghost mt-7">Book another time</button>
      </div>
    );
  }

  return (
    <div className="border hairline bg-white">
      <div className="px-6 md:px-8 py-5 border-b hairline flex items-center justify-between">
        <div>
          <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">30-Minute Consultation</div>
          <div className="font-display ink text-[20px] mt-1" style={{ fontWeight: 500 }}>Free, in-store</div>
        </div>
        <div className="text-right">
          <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">McKinney, TX</div>
          <div className="text-[13px] body-ink mt-1">Walk-ins welcome too</div>
        </div>
      </div>

      <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x hairline">
        {/* Calendar */}
        <div className="p-6 md:p-8">
          <div className="flex items-center justify-between">
            <button onClick={() => step(-1)} disabled={isCurrentMonth} className="w-9 h-9 border hairline inline-flex items-center justify-center disabled:opacity-30 hover:bg-[#EFE5D0]/60" aria-label="Previous month">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1F1A14" strokeWidth="1.8"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <div className="font-display ink text-[18px]" style={{ fontWeight: 500 }}>{MONTH_NAMES[cursor.m]} {cursor.y}</div>
            <button onClick={() => step(1)} className="w-9 h-9 border hairline inline-flex items-center justify-center hover:bg-[#EFE5D0]/60" aria-label="Next month">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1F1A14" strokeWidth="1.8"><path d="M9 18l6-6-6-6"/></svg>
            </button>
          </div>
          <div className="mt-5 grid grid-cols-7 gap-1 text-center">
            {WEEKDAYS.map((d, i) => <div key={i} className="text-[10px] font-mono uppercase tracking-widest text-[#807466] py-2">{d}</div>)}
            {cells.map((d, i) => {
              const disabled = isDisabled(d);
              const selected = selectedDay === d && d != null;
              return (
                <button
                  key={i}
                  disabled={disabled}
                  onClick={() => { setSelectedDay(d); setSelectedTime(null); }}
                  className={`aspect-square text-[14px] rounded-sm transition-colors ${
                    !d ? '' :
                    disabled ? 'text-[#807466]/30 line-through' :
                    selected ? 'bg-[#A0522D] text-white font-medium' :
                    'ink hover:bg-[#EFE5D0]/60'
                  }`}
                >
                  {d || ''}
                </button>
              );
            })}
          </div>
          <div className="mt-5 pt-5 border-t hairline text-[12px] text-[#807466] flex items-center gap-4">
            <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-[#A0522D]"></span>Selected</span>
            <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-[#807466]/40"></span>Unavailable</span>
          </div>
        </div>

        {/* Time slots */}
        <div className="p-6 md:p-8">
          {!selectedDay && (
            <div className="h-full min-h-[280px] flex flex-col items-center justify-center text-center">
              <div className="font-display ink text-[22px]" style={{ fontWeight: 500, fontStyle:'italic' }}>Pick a date</div>
              <p className="mt-2 text-[13px] text-[#807466] max-w-[28ch]">We&apos;re open Monday – Saturday. Sundays are closed for family.</p>
            </div>
          )}
          {selectedDay && (
            <div>
              <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">Available times</div>
              <div className="font-display ink text-[20px] mt-1" style={{ fontWeight: 500 }}>{MONTH_NAMES[cursor.m]} {selectedDay}, {cursor.y}</div>
              <div className="mt-5 grid grid-cols-2 gap-2 max-h-[300px] overflow-y-auto pr-1">
                {TIME_SLOTS.map(t => (
                  <button
                    key={t}
                    onClick={() => setSelectedTime(t)}
                    className={`border hairline py-3 text-[14px] transition-colors ${selectedTime === t ? 'bg-[#1F1A14] text-white border-[#1F1A14]' : 'bg-white ink hover:border-[#A0522D]'}`}
                  >
                    {t}
                  </button>
                ))}
              </div>
              <button
                disabled={!selectedTime}
                onClick={() => setConfirmed(true)}
                className="btn-primary w-full justify-center mt-6 disabled:opacity-40 disabled:cursor-not-allowed"
              >
                {selectedTime ? `Book ${selectedTime}` : 'Pick a time'}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Book() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Book an Appointment"
        title="Book a Consultation"
        italicWord="Book"
        lead="Free 30-minute in-store consultation. Bring your project (or a photo) and we'll talk through framing options together."
      />
      <section className="py-12 md:py-16">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-8">
              <BookingWidget />
            </div>
            <aside className="md:col-span-4">
              <div className="border hairline bg-white/60 p-6">
                <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">Or skip the calendar</div>
                <div className="font-display ink mt-2 text-[22px]" style={{ fontWeight: 500 }}>Just <em style={{ fontStyle:'italic' }}>text us</em>.</div>
                <p className="mt-3 text-[14px] body-ink">Send a photo of your piece and we&apos;ll reply with a rough quote.</p>
                <a href={COPY_BK.smsHref} className="btn-primary mt-5 w-full justify-center">Text {COPY_BK.phone}</a>
                <a href={COPY_BK.phoneHref} className="btn-ghost mt-2 w-full justify-center">Call {COPY_BK.phone}</a>
              </div>
              <div className="mt-4 border hairline bg-white/60 p-6">
                <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">What to bring</div>
                <ul className="mt-3 space-y-2 text-[14px] body-ink">
                  <li className="flex gap-2"><span className="text-[#A0522D]">·</span>The piece itself, if it travels well</li>
                  <li className="flex gap-2"><span className="text-[#A0522D]">·</span>Or a clear photo with dimensions</li>
                  <li className="flex gap-2"><span className="text-[#A0522D]">·</span>A rough idea of where it&apos;ll hang</li>
                  <li className="flex gap-2"><span className="text-[#A0522D]">·</span>Any deadline (birthday, gift, etc.)</li>
                </ul>
              </div>
              <div className="mt-4">
                <ClosureNotice tight />
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Book = Book;