// Calendar + DayPanel
const CAL_CLIENTS = window.NEXUS_DATA.CLIENTS;
const CAL_USERS   = window.NEXUS_DATA.USERS;
const CAL_EVTS    = window.NEXUS_DATA.CAL_EVENTS;

const STATUS_COLOR = {
  requested: "#6B6E73",
  quoted:    "#6B4FA8",
  sourcing:  "#A37018",
  ordered:   "#2A5F8F",
  shipped:   "#1F7A7A",
  received:  "#5E7E3F",
  delivered: "#2D6B3D",
  cancelled: "#9A3A3A",
};

const KIND_LABEL = {
  eta:      "ETA",
  follow:   "Follow-up",
  needed:   "Needed by",
  shipping: "Shipping",
};

function ymd(d) {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
}

function buildMonthGrid(year, monthIdx) {
  // Week starts Mon
  const first = new Date(year, monthIdx, 1);
  const dow = (first.getDay() + 6) % 7; // 0 = Mon
  const start = new Date(year, monthIdx, 1 - dow);
  const cells = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
    cells.push(d);
  }
  return cells;
}

function Calendar({ selected, onSelect, today }) {
  const [view, setView] = useState({ y: today.getFullYear(), m: today.getMonth() });

  const cells = useMemo(() => buildMonthGrid(view.y, view.m), [view]);
  const monthName = new Date(view.y, view.m, 1).toLocaleString("en", { month: "long" });

  // Index events by date
  const eventsByDate = useMemo(() => {
    const map = {};
    for (const ev of CAL_EVTS) {
      (map[ev.date] = map[ev.date] || []).push(ev);
    }
    for (const k in map) map[k].sort((a, b) => a.time.localeCompare(b.time));
    return map;
  }, []);

  const stepMonth = (delta) => {
    let y = view.y, m = view.m + delta;
    if (m < 0) { m = 11; y--; }
    if (m > 11) { m = 0; y++; }
    setView({ y, m });
  };

  const goToday = () => {
    setView({ y: today.getFullYear(), m: today.getMonth() });
    onSelect(today);
  };

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

  return (
    <div className="cal-grid-wrap">
      <div className="cal-head">
        <div className="cal-title">
          <span>{monthName} {view.y}</span>
          <span className="ym">· wk {Math.ceil((new Date(view.y, view.m, 1).getDate() + ((new Date(view.y, view.m, 1).getDay() + 6) % 7)) / 7)}</span>
        </div>
        <button className="today-btn" onClick={goToday}>Today</button>
        <div className="cal-month-nav">
          <button onClick={() => stepMonth(-1)}><Icon.Chev dir="left"/></button>
          <button onClick={() => stepMonth(1)}><Icon.Chev dir="right"/></button>
        </div>
      </div>

      <div className="cal-weekdays">
        {weekdays.map((w) => <div key={w}>{w}</div>)}
      </div>

      <div className="cal-grid">
        {cells.map((d, i) => {
          const key = ymd(d);
          const events = eventsByDate[key] || [];
          const inMonth = d.getMonth() === view.m;
          const isToday = ymd(d) === ymd(today);
          const isSel = ymd(d) === ymd(selected);
          const cls = [
            "cal-cell",
            !inMonth && "adjacent",
            isToday && "today",
            isSel && "selected",
          ].filter(Boolean).join(" ");
          const visible = events.slice(0, 2);
          const extra = events.length - visible.length;
          return (
            <div key={i} className={cls} onClick={() => onSelect(d)}>
              <span className="cal-num">{d.getDate()}</span>
              <div className="cal-events">
                {visible.map((ev, j) => (
                  <div key={j} className="cal-event" title={`${ev.time} · ${ev.note}`}>
                    <span className="dot" style={{ background: STATUS_COLOR[ev.status] }}></span>
                    <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{ev.time} · {ev.nx.replace("NX-", "")}</span>
                  </div>
                ))}
                {extra > 0 && <div className="cal-more">+{extra} more</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DayPanel({ date }) {
  const key = ymd(date);
  const items = useMemo(() => CAL_EVTS.filter(e => e.date === key).sort((a, b) => a.time.localeCompare(b.time)), [key]);
  const long = date.toLocaleString("en", { weekday: "long", month: "long", day: "numeric" });
  const eyebrow = date.toLocaleString("en", { weekday: "short" }).toUpperCase() + " · " +
                  date.toLocaleString("en", { month: "short", day: "2-digit", year: "numeric" }).toUpperCase();

  return (
    <aside className="day-panel">
      <div className="day-head">
        <div className="day-eyebrow">{eyebrow}</div>
        <div className="day-title">
          {long}
          <span className="count">{items.length} {items.length === 1 ? "event" : "events"}</span>
        </div>
      </div>
      <div className="day-list">
        {items.length === 0 && (
          <div className="day-empty">No events scheduled for this day.</div>
        )}
        {items.map((ev, i) => {
          const client = CAL_CLIENTS[ev.client];
          return (
            <div key={i} className="day-item">
              <div className="day-time">{ev.time}</div>
              <div className="day-body">
                <div className="nx">{ev.nx} <span style={{ color: "var(--ink-4)" }}>·</span> <span className="mono" style={{ color: "var(--ink-2)", fontSize: 11.5 }}>{ev.pn}</span></div>
                <div className="desc">{ev.note}</div>
                <div className="meta">
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 5,
                    fontFamily: "Geist Mono, monospace", fontSize: 10.5,
                    letterSpacing: ".06em", textTransform: "uppercase",
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: STATUS_COLOR[ev.status] }}></span>
                    {KIND_LABEL[ev.kind]}
                  </span>
                  <span className="sep">·</span>
                  <span style={{ color: client.color, fontWeight: 500 }}>{client.short}</span>
                  <span className="sep">·</span>
                  <span className="mono">{ev.req}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </aside>
  );
}

Object.assign(window, { Calendar, DayPanel, STATUS_COLOR, KIND_LABEL, ymd });