// ============================================================
// FitMinds — Bookings: quick-entry + list + drawer
// ============================================================

// Parse natural-language bookings: "St Joseph's PS - 6 weeks - £300 - Mon 10am"
function parseBooking(text) {
  if (!text || !text.trim()) return { empty: true };
  const t = text.toLowerCase();
  const out = { empty: false, schoolId: null, schoolName: null, weeks: null, price: null, day: null, time: null };

  // school
  let bestScore = 0;
  for (const s of SCHOOLS) {
    const nm = s.name.toLowerCase().replace(/'/g,"");
    const txt = t.replace(/'/g,"");
    if (txt.includes(nm)) { out.schoolId = s.id; out.schoolName = s.name; break; }
    // partial match on first word
    const first = nm.split(" ")[0];
    if (first.length > 3 && txt.includes(first)) {
      const score = first.length;
      if (score > bestScore) { bestScore = score; out.schoolId = s.id; out.schoolName = s.name; }
    }
  }

  // weeks
  const wkMatch = t.match(/(\d+)\s*(?:week|wk|w\b)/);
  if (wkMatch) out.weeks = +wkMatch[1];

  // price
  const prMatch = t.match(/[£$]\s?(\d+(?:[,.]\d+)?)/) || t.match(/(\d+)\s*(?:pounds|gbp)\b/);
  if (prMatch) out.price = +prMatch[1].replace(",","");

  // day
  const days = { mon:1, monday:1, tue:2, tuesday:2, wed:3, wednesday:3, thu:4, thur:4, thursday:4, fri:5, friday:5 };
  for (const k in days) { const re = new RegExp(`\\b${k}\\b`); if (re.test(t)) { out.day = days[k]; break; } }

  // time
  const tm = t.match(/(\d{1,2})(?:[:.](\d{2}))?\s*(am|pm)?/);
  if (tm) {
    let h = +tm[1]; const m = tm[2] ? +tm[2] : 0; const ap = tm[3];
    if (ap === "pm" && h < 12) h += 12; if (ap === "am" && h === 12) h = 0;
    if (h >= 0 && h < 24 && (tm[2] || tm[3])) out.time = `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}`;
  }

  return out;
}

function QuickEntryCard({ onCreate, showToast }) {
  const [text, setText] = React.useState("");
  const parsed = parseBooking(text);
  const DAYNAMES = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

  const complete = parsed.schoolId && parsed.weeks && parsed.price;

  const handleSubmit = (e) => {
    e && e.preventDefault && e.preventDefault();
    if (!complete) return;
    onCreate(parsed);
    setText("");
    showToast && showToast("Booking created — invoice ready to generate.", "success");
  };

  return (
    <div className="quick-entry-card">
      <div className="flex items-center justify-between" style={{ marginBottom: 10 }}>
        <div>
          <h2 className="section-heading">Quick book</h2>
          <div style={{ fontSize: 14.5, fontWeight: 600, marginTop: 3 }}>Type it once — we'll structure the rest.</div>
        </div>
        <Chip tone="mint">
          <Icon name="sparkles" size={12} /> AI-parsed
        </Chip>
      </div>

      <form onSubmit={handleSubmit}>
        <input
          className="quick-entry-input"
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder="e.g. St Joseph's PS — 6 weeks — £300 — Mon 10am"
          autoComplete="off"
        />

        <div className="parse-preview">
          {parsed.empty ? (
            <span className="muted text-xs">Try: "Holy Cross — 4 weeks — £220 — Tue 1:30pm"</span>
          ) : (
            <React.Fragment>
              <span className={"parse-chip " + (parsed.schoolId ? "" : "dim")}>
                <Icon name="school-2" size={13} />
                {parsed.schoolName || "School?"}
              </span>
              <span className={"parse-chip " + (parsed.weeks ? "" : "dim")}>
                <Icon name="calendar-range" size={13} />
                {parsed.weeks ? parsed.weeks + " weeks" : "Weeks?"}
              </span>
              <span className={"parse-chip " + (parsed.price ? "" : "dim")}>
                <Icon name="banknote" size={13} />
                {parsed.price ? money(parsed.price) : "Price?"}
              </span>
              {parsed.day && (
                <span className="parse-chip">
                  <Icon name="calendar-days" size={13} />
                  {DAYNAMES[parsed.day]}s
                </span>
              )}
              {parsed.time && (
                <span className="parse-chip">
                  <Icon name="clock" size={13} />
                  {parsed.time}
                </span>
              )}
            </React.Fragment>
          )}
          <div style={{ marginLeft: "auto" }}>
            <Button variant="primary" icon="plus" disabled={!complete} onClick={handleSubmit}>Create booking</Button>
          </div>
        </div>
      </form>
    </div>
  );
}

function BookingsPage({ onNav, showToast, bookings, setBookings, openInvoiceFor }) {
  const [filter, setFilter] = React.useState("all");
  const [drawer, setDrawer] = React.useState(null); // booking or 'new'
  const [view, setView] = React.useState("list");

  const filtered = bookings.filter(b => filter === "all" || b.status === filter);
  const filterCounts = {
    all: bookings.length,
    active: bookings.filter(b => b.status === "active").length,
    upcoming: bookings.filter(b => b.status === "upcoming").length,
    completed: bookings.filter(b => b.status === "completed").length,
  };

  const createFromQuick = (parsed) => {
    const id = "b" + Math.random().toString(36).slice(2,6);
    const nb = {
      id,
      schoolId: parsed.schoolId,
      title: SCHOOL_BY_ID[parsed.schoolId].name + " — Movement Block",
      start: "2026-05-04",
      weeks: parsed.weeks,
      daysOfWeek: [parsed.day || 1],
      time: parsed.time || "10:00",
      duration: 45,
      sessionsPerWeek: 1,
      pricePerSession: Math.round(parsed.price / parsed.weeks),
      totalPrice: parsed.price,
      status: "upcoming",
      currentWeek: 0,
      invoiceStatus: "not_sent",
      notes: "Created from quick entry.",
    };
    setBookings([nb, ...bookings]);
  };

  return (
    <div className="space-y-6">
      <PageHead
        title="Bookings"
        subtitle={`${filterCounts.all} total  ·  ${filterCounts.active} running this week`}
        action={
          <div className="flex gap-2">
            <div className="tabs-row">
              <button className={`tab ${view==="list"?"is-active":""}`} onClick={() => setView("list")}>List</button>
              <button className={`tab ${view==="calendar"?"is-active":""}`} onClick={() => setView("calendar")}>Calendar</button>
            </div>
            <Button variant="primary" icon="plus" onClick={() => setDrawer("new")}>New booking</Button>
          </div>
        }
      />

      <QuickEntryCard onCreate={createFromQuick} showToast={showToast} />

      {/* Filters */}
      <div className="flex items-center gap-2 flex-wrap">
        {["all","active","upcoming","completed"].map(k => (
          <button key={k} className={`filter-pill ${filter===k?"is-active":""}`} onClick={() => setFilter(k)}>
            {k[0].toUpperCase()+k.slice(1)}
            <span className="pill-count">{filterCounts[k]}</span>
          </button>
        ))}
      </div>

      {view === "list" ? (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ paddingLeft: 20 }}>School · Block</th>
                <th>Start</th>
                <th>Weeks</th>
                <th>Day · Time</th>
                <th style={{ textAlign: "right" }}>Total</th>
                <th>Status</th>
                <th>Invoice</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(b => {
                const s = SCHOOL_BY_ID[b.schoolId];
                const DAYNAMES = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
                return (
                  <tr key={b.id} onClick={() => setDrawer(b)} style={{ cursor: "pointer" }}>
                    <td style={{ paddingLeft: 20 }}>
                      <div className="flex items-center gap-3">
                        <SchoolTile schoolId={b.schoolId} size={36} />
                        <div>
                          <div style={{ fontWeight: 600 }}>{s.name}</div>
                          <div className="muted text-xs">{b.title}</div>
                        </div>
                      </div>
                    </td>
                    <td className="muted">{fmtDateShort(b.start)}</td>
                    <td><Chip tone={b.status==="active"?"green":b.status==="upcoming"?"blue":"neutral"}>{b.currentWeek || 0} / {b.weeks}</Chip></td>
                    <td className="muted">{DAYNAMES[b.daysOfWeek[0]]} · <span className="tabnum">{b.time}</span></td>
                    <td style={{ textAlign: "right" }}><span className="tabnum" style={{ fontWeight: 600 }}>{money(b.totalPrice)}</span></td>
                    <td><StatusChip status={b.status} /></td>
                    <td><StatusChip status={b.invoiceStatus} /></td>
                    <td style={{ width: 44 }}><Icon name="chevron-right" size={16} style={{ color: "var(--muted-foreground)" }} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      ) : (
        <CalendarMini bookings={filtered} onOpen={(b) => setDrawer(b)} />
      )}

      {drawer && <BookingDrawer booking={drawer === "new" ? null : drawer} onClose={() => setDrawer(null)} onInvoice={(b) => { setDrawer(null); openInvoiceFor(b); }} showToast={showToast} />}
    </div>
  );
}

function CalendarMini({ bookings, onOpen }) {
  // Week-of-April-20 2026 view
  const days = [
    { date: "2026-04-20", name: "Mon", num: 20 },
    { date: "2026-04-21", name: "Tue", num: 21, today: true },
    { date: "2026-04-22", name: "Wed", num: 22 },
    { date: "2026-04-23", name: "Thu", num: 23 },
    { date: "2026-04-24", name: "Fri", num: 24 },
  ];
  const hours = [9, 10, 11, 12, 13, 14, 15];

  return (
    <div className="card" style={{ padding: 18 }}>
      <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
        <div>
          <div className="section-heading">Week of</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>20–24 April 2026</div>
        </div>
        <div className="flex gap-2">
          <button className="icon-btn"><Icon name="chevron-left" size={16} /></button>
          <button className="btn btn-outline btn-sm">Today</button>
          <button className="icon-btn"><Icon name="chevron-right" size={16} /></button>
        </div>
      </div>

      <div className="calendar-grid" style={{ gridTemplateColumns: "64px repeat(5, 1fr)" }}>
        <div className="cal-cell" style={{ background: "oklch(0 0 0 / 2%)" }}></div>
        {days.map(d => (
          <div key={d.date} className={"cal-cell header " + (d.today ? "is-today" : "")}>
            <div className="dname">{d.name}</div>
            <div className="dnum tabnum">{d.num}</div>
          </div>
        ))}
        {hours.map(h => (
          <React.Fragment key={h}>
            <div className="cal-time">{h}:00</div>
            {days.map(d => {
              // match bookings happening on this day
              const matches = bookings.filter(b => {
                const DAYMAP = { "2026-04-20":1, "2026-04-21":2, "2026-04-22":3, "2026-04-23":4, "2026-04-24":5 };
                const dow = DAYMAP[d.date];
                return b.daysOfWeek.includes(dow) && +b.time.split(":")[0] === h && b.status !== "completed";
              });
              return (
                <div key={d.date + h} className="cal-cell">
                  {matches.map(b => {
                    const s = SCHOOL_BY_ID[b.schoolId];
                    return (
                      <div key={b.id} className={"cal-event " + schoolEvtClass(b.schoolId)} onClick={() => onOpen(b)}>
                        {s.short} · {b.title.slice(0, 20)}
                        <div className="time">{b.time} · {b.duration}m</div>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function BookingDrawer({ booking, onClose, onInvoice, showToast }) {
  const isNew = !booking;
  const [form, setForm] = React.useState(isNew ? {
    schoolId: "sj", title: "", start: "2026-05-04", weeks: 6, day: 1, time: "10:00",
    duration: 45, pricePerSession: 50, notes: "",
  } : null);

  const DAYNAMES = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

  if (!isNew) {
    const s = SCHOOL_BY_ID[booking.schoolId];
    const end = addWeeks(booking.start, booking.weeks);
    return (
      <div className="scrim" onClick={onClose}>
        <div className="drawer" onClick={e => e.stopPropagation()}>
          <div className="drawer-header">
            <div className="flex items-center gap-3">
              <SchoolTile schoolId={booking.schoolId} />
              <div>
                <div style={{ fontSize: 18, fontWeight: 700 }}>{s.name}</div>
                <div className="muted text-xs">{booking.title}</div>
              </div>
            </div>
            <button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
          </div>
          <div className="drawer-body space-y-4">
            <div className="grid-2">
              <MetaRow label="Start" value={fmtDate(booking.start)} icon="calendar" />
              <MetaRow label="End"   value={fmtDate(end)} icon="calendar-check" />
              <MetaRow label="Weeks" value={`${booking.weeks} weeks · ${booking.currentWeek} done`} icon="calendar-range" />
              <MetaRow label="Day / Time" value={`${DAYNAMES[booking.daysOfWeek[0]]}s · ${booking.time}`} icon="clock" />
              <MetaRow label="Session price" value={money(booking.pricePerSession)} icon="tag" />
              <MetaRow label="Total" value={money(booking.totalPrice)} icon="banknote" />
            </div>

            <div>
              <div className="section-heading" style={{ marginBottom: 8 }}>Progress</div>
              <div className="progress"><span style={{ width: (booking.currentWeek / booking.weeks * 100) + "%" }} /></div>
              <div className="muted text-xs" style={{ marginTop: 6 }}>Week {booking.currentWeek} of {booking.weeks}</div>
            </div>

            <div className="card" style={{ padding: 14, background: "var(--muted)", border: "none" }}>
              <div className="section-heading">Notes</div>
              <div style={{ fontSize: 13.5, marginTop: 6 }}>{booking.notes}</div>
            </div>

            <div>
              <div className="section-heading" style={{ marginBottom: 8 }}>Invoice</div>
              <div className="flex items-center justify-between" style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 12 }}>
                <div className="flex items-center gap-3">
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--muted)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="receipt" size={16} />
                  </div>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>
                      {booking.invoiceStatus === "not_sent" ? "No invoice yet" : "Invoice generated"}
                    </div>
                    <div className="muted text-xs">
                      {booking.invoiceStatus === "not_sent" ? "Click to generate from booking data." : `Status: ${booking.invoiceStatus}`}
                    </div>
                  </div>
                </div>
                <Button variant={booking.invoiceStatus === "not_sent" ? "primary" : "outline"} icon={booking.invoiceStatus === "not_sent" ? "sparkles" : "eye"} onClick={() => onInvoice(booking)}>
                  {booking.invoiceStatus === "not_sent" ? "Generate invoice" : "Open invoice"}
                </Button>
              </div>
            </div>
          </div>
          <div className="drawer-footer">
            <Button variant="ghost" icon="copy">Duplicate</Button>
            <Button variant="outline" icon="pencil">Edit</Button>
            <Button variant="primary" icon="sparkles" onClick={() => onInvoice(booking)}>Generate invoice</Button>
          </div>
        </div>
      </div>
    );
  }

  // NEW booking form
  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div style={{ fontSize: 18, fontWeight: 700 }}>New booking</div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="drawer-body space-y-4">
          <Field label="School">
            <select className="select" value={form.schoolId} onChange={e => setForm({ ...form, schoolId: e.target.value })}>
              {SCHOOLS.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </Field>
          <Field label="Block name / notes">
            <input className="input" value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} placeholder="e.g. P4–P5 Movement Block" />
          </Field>
          <div className="grid-2">
            <Field label="Start date"><input type="date" className="input" value={form.start} onChange={e => setForm({ ...form, start: e.target.value })} /></Field>
            <Field label="Weeks"><input type="number" className="input" value={form.weeks} onChange={e => setForm({ ...form, weeks: +e.target.value })} /></Field>
          </div>
          <div className="grid-2">
            <Field label="Day">
              <select className="select" value={form.day} onChange={e => setForm({ ...form, day: +e.target.value })}>
                {DAYNAMES.slice(1,6).map((d, i) => <option key={i+1} value={i+1}>{d}</option>)}
              </select>
            </Field>
            <Field label="Time"><input type="time" className="input" value={form.time} onChange={e => setForm({ ...form, time: e.target.value })} /></Field>
          </div>
          <div className="grid-2">
            <Field label="Session duration (min)"><input type="number" className="input" value={form.duration} onChange={e => setForm({ ...form, duration: +e.target.value })} /></Field>
            <Field label="Price per session"><input type="number" className="input" value={form.pricePerSession} onChange={e => setForm({ ...form, pricePerSession: +e.target.value })} /></Field>
          </div>
          <div style={{ padding: 12, borderRadius: 11, background: "oklch(.66 .18 35 / .08)", border: "1px solid oklch(.66 .18 35 / .2)" }}>
            <div className="flex items-center justify-between">
              <div className="muted text-xs">Total</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: "var(--fm-primary-dark)" }} className="tabnum">
                {money(form.weeks * form.pricePerSession)}
              </div>
            </div>
            <div className="muted text-xs" style={{ marginTop: 4 }}>{form.weeks} weeks × {money(form.pricePerSession)} per session</div>
          </div>
          <Field label="Notes (optional)"><textarea className="textarea" value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })} placeholder="Focus areas, group size, access needs…" /></Field>
        </div>
        <div className="drawer-footer">
          <Button variant="outline" onClick={onClose}>Cancel</Button>
          <Button variant="primary" icon="check" onClick={() => { showToast("Booking saved.", "success"); onClose(); }}>Save booking</Button>
        </div>
      </div>
    </div>
  );
}

function MetaRow({ label, value, icon }) {
  return (
    <div style={{ padding: 12, borderRadius: 11, background: "var(--muted)" }}>
      <div className="flex items-center gap-2 muted text-xs" style={{ marginBottom: 4 }}>
        <Icon name={icon} size={12} />
        {label}
      </div>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{value}</div>
    </div>
  );
}

Object.assign(window, { BookingsPage, parseBooking, QuickEntryCard, BookingDrawer });