// ADM-PROC-16 · Slot calendar (AMOMS Module 1)
// Admin Web · Procurement Officer · P0 · 1440×900
// Components: C-206 Calendar view · C-014 Status pill · C-001 Button · C-007 Date-range picker
// Registered as window.Pages.slotCalendar

const Ic16 = window.Icons;
const DAYS_16 = [
  { dn: "Mon", dd: 11 }, { dn: "Tue", dd: 12 }, { dn: "Wed", dd: 13 },
  { dn: "Thu", dd: 14 }, { dn: "Fri", dd: 15 }, { dn: "Sat", dd: 16 },
];
const TIMES_16 = ["08:00", "10:00", "12:00", "14:00", "16:00"];
const CAP_PER_DAY = 4;

// slots: day (0-5), time (0-4), po, farmer, qty, status, product
const SLOTS_16 = [
  { day: 0, time: 0, po: "PO-2026-0031", farmer: "Joseph Mwangi", qty: 2200, status: "done", product: "Fuerte" },
  { day: 1, time: 1, po: "PO-2026-0042", farmer: "Mary Wairimu", qty: 6200, status: "confirmed", product: "Hass" },
  { day: 1, time: 3, po: "PO-2026-0042", farmer: "Esther Njeri", qty: 5400, status: "intransit", product: "Hass" },
  { day: 2, time: 0, po: "PO-2026-0038", farmer: "Grace Wambui", qty: 4500, status: "confirmed", product: "Fuerte" },
  { day: 2, time: 2, po: "PO-2026-0042", farmer: "Wanjiru Kamau", qty: 3800, status: "confirmed", product: "Hass" },
  { day: 3, time: 1, po: "PO-2026-0040", farmer: "James Maina", qty: 3100, status: "confirmed", product: "Hass" },
  // Friday overbooked
  { day: 4, time: 0, po: "PO-2026-0042", farmer: "Lucy Akinyi", qty: 2900, status: "confirmed", product: "Hass" },
  { day: 4, time: 1, po: "PO-2026-0041", farmer: "Mary Wairimu", qty: 6200, status: "confirmed", product: "Hass" },
  { day: 4, time: 2, po: "PO-2026-0039", farmer: "Patrick Njoroge", qty: 2400, status: "confirmed", product: "Fuerte" },
  { day: 4, time: 3, po: "PO-2026-0037", farmer: "Daniel Kiprono", qty: 1500, status: "intransit", product: "Pinkerton" },
  { day: 4, time: 4, po: "PO-2026-0035", farmer: "Rose Atieno", qty: 900, status: "confirmed", product: "Hass" },
  { day: 5, time: 2, po: "PO-2026-0036", farmer: "Samuel Otieno", qty: 1200, status: "confirmed", product: "Hass" },
];
const slotClass = (s) => s.status === "done" ? "done" : s.status === "intransit" ? "intransit" : "confirmed";

const SlotCalendar = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const tweakView = (tweaks && tweaks.calendarView) || "week";
  const [view, setView] = useState(tweakView);
  useEffect(() => { setView(tweakView); }, [tweakView]);

  const [product, setProduct] = useState("All");
  const [region, setRegion] = useState("All");
  const [sel, setSel] = useState(null);

  const visible = SLOTS_16.filter(s => product === "All" || s.product === product);
  const perDayCount = DAYS_16.map((_, d) => visible.filter(s => s.day === d).length);

  const Slot = ({ s }) => (
    <div className={`cal-slot ${slotClass(s)}${sel === s ? " sel" : ""}`} onClick={() => setSel(s)}>
      <div className="po">{s.po}</div>
      <div className="fm">{s.farmer.split(" ")[0]} {s.farmer.split(" ")[1]?.[0]}.</div>
      <div className="qt">{s.qty.toLocaleString("en-US")} kg · {s.product}</div>
    </div>
  );

  return (
    <div className="page">
      <div className="cal-head">
        <h1 className="cal-title">Gate-in schedule</h1>
        <div className="cal-nav" style={{ marginLeft: 8 }}>
          <button className="btn btn-outline btn-icon btn-sm" aria-label="Previous"><Ic16.ChevronLeft size={15} /></button>
          <span className="cal-range">{view === "month" ? "May 2026" : view === "day" ? "Tue 12 May" : "11 – 16 May 2026"}</span>
          <button className="btn btn-outline btn-icon btn-sm" aria-label="Next"><Ic16.ChevronRight size={15} /></button>
        </div>
        <div className="cal-head-actions">
          <select className="select" style={{ width: "auto", height: 32 }} value={product} onChange={(e) => setProduct(e.target.value)}>
            <option>All</option><option>Hass</option><option>Fuerte</option><option>Pinkerton</option>
          </select>
          <select className="select" style={{ width: "auto", height: 32 }} value={region} onChange={(e) => setRegion(e.target.value)}>
            <option value="All">All regions</option><option>Murang'a</option><option>Nyeri</option><option>Embu</option>
          </select>
          <div className="cal-seg">
            {["Day", "Week", "Month"].map(v => <button key={v} className={view === v.toLowerCase() ? "active" : ""} onClick={() => setView(v.toLowerCase())}>{v}</button>)}
          </div>
          <Button variant="primary" icon={Ic16.Plus} onClick={() => toast({ title: "New slot", desc: "Manual ad-hoc supplier slot." })}>New slot</Button>
        </div>
      </div>

      <div className="cal-layout">
        <div className="cal-wrap">
          {/* WEEK VIEW */}
          {view === "week" && (
            <div className="cal-week">
              <div className="cal-grid" style={{ gridTemplateColumns: "64px repeat(6, 1fr)" }}>
                <div className="cal-colhead" style={{ gridColumn: "1 / -1", gridTemplateColumns: "64px repeat(6, 1fr)" }}>
                  <div className="cal-time" style={{ border: "none" }}></div>
                  {DAYS_16.map((d, i) => {
                    const over = perDayCount[i] > CAP_PER_DAY;
                    return (
                      <div key={i} className="cal-dayhead">
                        <div className="dn">{d.dn}</div><div className="dd">{d.dd}</div>
                        <div className={`cal-cap${over ? " over" : ""}`}>{over && "⚠ "}{perDayCount[i]}/{CAP_PER_DAY}</div>
                      </div>
                    );
                  })}
                </div>
                {TIMES_16.map((t, ti) => (
                  <div key={ti} className="cal-row" style={{ gridColumn: "1 / -1", gridTemplateColumns: "64px repeat(6, 1fr)" }}>
                    <div className="cal-time">{t}</div>
                    {DAYS_16.map((_, di) => (
                      <div key={di} className="cal-cell">
                        {visible.filter(s => s.day === di && s.time === ti).map((s, k) => <Slot key={k} s={s} />)}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* DAY VIEW (Tuesday) */}
          {view === "day" && (
            <div className="cal-grid" style={{ gridTemplateColumns: "70px 1fr" }}>
              <div className="cal-colhead" style={{ gridColumn: "1 / -1", gridTemplateColumns: "70px 1fr" }}>
                <div className="cal-time" style={{ border: "none" }}></div>
                <div className="cal-dayhead"><div className="dn">Tuesday</div><div className="dd">12 May</div><div className="cal-cap">{perDayCount[1]}/{CAP_PER_DAY} slots</div></div>
              </div>
              {["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"].map((t, ti) => (
                <div key={ti} className="cal-row" style={{ gridColumn: "1 / -1", gridTemplateColumns: "70px 1fr" }}>
                  <div className="cal-time">{t}</div>
                  <div className="cal-cell" style={{ minHeight: 48 }}>
                    {visible.filter(s => s.day === 1 && TIMES_16[s.time] === t).map((s, k) => <Slot key={k} s={s} />)}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* MONTH VIEW */}
          {view === "month" && (
            <div className="cal-month">
              {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(d => <div key={d} className="cal-mhead">{d}</div>)}
              {Array.from({ length: 35 }).map((_, i) => {
                const date = i - 3; // May starts on Thu(approx) — offset for layout
                const inMonth = date >= 1 && date <= 31;
                const daySlots = inMonth ? SLOTS_16.filter(s => DAYS_16[s.day] && DAYS_16[s.day].dd === date) : [];
                const over = date === 15;
                return (
                  <div key={i} className={`cal-mcell${inMonth ? "" : " dim"}`}>
                    {inMonth && <div className="cal-mdate">{date}</div>}
                    {daySlots.length > 0 && (
                      <>
                        <div className="cal-mdots">{daySlots.map((s, k) => <span key={k} className="cal-mdot" style={{ background: s.status === "done" ? "var(--success)" : s.status === "intransit" ? "var(--info)" : "var(--avocado)" }} />)}</div>
                        <div className="cal-mcap"><div style={{ width: Math.min(100, daySlots.length / CAP_PER_DAY * 100) + "%", background: over ? "var(--destructive)" : "var(--avocado)" }} /></div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Right rail — slot detail / legend */}
        <div className="cal-rail">
          <Card>
            <CardHead title={sel && typeof sel === "object" ? "Slot detail" : "Legend"} />
            <div className="card-body" style={{ paddingTop: 2 }}>
              {sel && typeof sel === "object" ? (
                <>
                  <div className="cal-detail-row"><span className="k">PO</span><span className="mono" style={{ fontWeight: 600 }}>{sel.po}</span></div>
                  <div className="cal-detail-row"><span className="k">Farmer</span><span>{sel.farmer}</span></div>
                  <div className="cal-detail-row"><span className="k">Quantity</span><span>{sel.qty.toLocaleString("en-US")} kg {sel.product}</span></div>
                  <div className="cal-detail-row"><span className="k">Slot</span><span>{DAYS_16[sel.day].dn} {DAYS_16[sel.day].dd}, {TIMES_16[sel.time]}</span></div>
                  <div className="cal-detail-row"><span className="k">Status</span><StatusBadge status={sel.status === "done" ? "complete" : sel.status === "intransit" ? "in-delivery" : "confirmed"} /></div>
                  <div className="row" style={{ marginTop: 14 }}>
                    <Button variant="outline" size="sm" icon={Ic16.Calendar} onClick={() => go("ADM-PROC-15.html")} style={{ flex: 1 }}>Reschedule</Button>
                    <Button variant="primary" size="sm" icon={Ic16.ArrowRight} onClick={() => go("ADM-PROC-13.html")} style={{ flex: 1 }}>View gate-in</Button>
                  </div>
                </>
              ) : (
                <>
                  <div className="stat-row"><span className="stat-label"><span className="cal-mdot" style={{ background: "var(--avocado)" }} />Confirmed</span></div>
                  <div className="stat-row"><span className="stat-label"><span className="cal-mdot" style={{ background: "var(--info)" }} />In transit</span></div>
                  <div className="stat-row"><span className="stat-label"><span className="cal-mdot" style={{ background: "var(--success)" }} />Delivered</span></div>
                  <div className="field-hint" style={{ marginTop: 12 }}>Click a gate-in to see its detail. Daily capacity is {CAP_PER_DAY} two-hour windows. Drag-to-reschedule fires a confirmation, never a silent change.</div>
                </>
              )}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { slotCalendar: SlotCalendar });