// Workspace · Calendar tab — month view + meetings
const CAL_TODAY = "2026-06-13";

function CalendarTab() {
  const { useState, useEffect } = React;
  const [meetings, setMeetings] = useState(D.meetings);
  const [showNew, setShowNew] = useState(false);
  const [presetDate, setPresetDate] = useState(null);
  const [sel, setSel] = useState(null);

  useEffect(() => { D.meetings = meetings; }, [meetings]);

  // June 2026: June 1 is a Monday, 30 days
  const days = [];
  for (let d = 1; d <= 30; d++) days.push("2026-06-" + String(d).padStart(2, "0"));
  const lead = 0; // Monday start
  const cells = Array(lead).fill(null).concat(days);
  while (cells.length % 7 !== 0) cells.push(null);

  // due items from the rest of the system, shown as dots
  const dueItems = {};
  const push = (date, label, tone) => {
    if (!date || !date.startsWith("2026-06")) return;
    (dueItems[date] = dueItems[date] || []).push({ label, tone });
  };
  (D.workspace.cards || []).forEach((c) => { if (c.col !== "Done") push(glIso(c.due), T("cal.taskPrefix") + " · " + c.title, "amber"); });
  (D.invoices || []).forEach((i) => { if (i.status === "Sent" || i.status === "Overdue") push(glIso(i.due), i.id + " · " + i.client, "red"); });
  (D.crm.activities || []).forEach((a) => { if (!a.done) push(glIso(a.due), TV(a.type) + " · " + a.what, "blue"); });

  const meetingsOn = (date) => meetings.filter((m) => m.date === date).sort((a, b) => a.time < b.time ? -1 : 1);
  const upcoming = meetings.filter((m) => m.date >= CAL_TODAY).sort((a, b) => (a.date + a.time) < (b.date + b.time) ? -1 : 1);
  const selMeeting = sel ? meetings.find((m) => m.id === sel) : null;

  const dayNum = (iso) => parseInt(iso.slice(8), 10);

  return (
    <div className="grid-23">
      <section className="card cal">
        <div className="cal-top">
          <h3 className="display">{TV("June")} 2026</h3>
          <Btn variant="primary" icon="plus" onClick={() => { setPresetDate(null); setShowNew(true); }}>{T("cal.newMeeting")}</Btn>
        </div>
        <div className="cal-grid cal-dow">
          {days.slice(0, 7).map((iso, i) => (
            <span key={i}>{new Date(iso + "T00:00:00").toLocaleDateString(uiLocale(), { weekday: "short" })}</span>
          ))}
        </div>
        <div className="cal-grid">
          {cells.map((date, i) => date === null ? <div key={"x" + i} className="cal-cell off"></div> : (
            <div key={date}
              className={"cal-cell" + (date === CAL_TODAY ? " today" : "") + (i % 7 >= 5 ? " wkend" : "")}
              onClick={() => { setPresetDate(date); setShowNew(true); }}
              title={T("cal.clickToSchedule")}>
              <span className="cal-num">{dayNum(date)}</span>
              <div className="cal-events">
                {meetingsOn(date).slice(0, 2).map((m) => (
                  <button key={m.id} className="cal-evt" onClick={(e) => { e.stopPropagation(); setSel(m.id); }}>
                    <span className="mono">{m.time}</span> {m.title}
                  </button>
                ))}
                {meetingsOn(date).length > 2 ? <span className="cal-more">{T("cal.moreN", { n: meetingsOn(date).length - 2 })}</span> : null}
                {(dueItems[date] || []).slice(0, 2).map((d, j) => (
                  <span key={j} className={"cal-due " + d.tone} title={d.label}><i></i>{d.label}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="cal-legend">
          <span><i className="dot evt"></i>{T("cal.meeting")}</span>
          <span><i className="dot red"></i>{T("cal.invoiceDue")}</span>
          <span><i className="dot amber"></i>{T("cal.taskDue")}</span>
          <span><i className="dot blue"></i>{T("cal.followUp")}</span>
        </div>
      </section>

      <section className="card" style={{ padding: "var(--card-pad)", alignSelf: "start" }}>
        <SectionHead title={T("cal.upcomingMeetings")} sub={T("cal.scheduledN", { n: upcoming.length })} />
        <div className="up-list">
          {upcoming.map((m) => (
            <button key={m.id} className="up-row" onClick={() => setSel(m.id)}>
              <span className="up-date">
                <b>{dayNum(m.date)}</b>
                <small>{new Date(m.date + "T00:00:00").toLocaleDateString(uiLocale(), { month: "short" })}</small>
              </span>
              <span className="up-main">
                <b>{m.title}</b>
                <small>{m.time} · {TV(m.dur)} · {TV(m.where)}</small>
              </span>
            </button>
          ))}
          {upcoming.length === 0 ? <p className="dim" style={{ fontSize: 13 }}>{T("cal.nothingScheduled")}</p> : null}
        </div>
      </section>

      <Drawer open={!!selMeeting} onClose={() => setSel(null)}
        title={selMeeting ? selMeeting.title : ""} sub={selMeeting ? prettyDate(selMeeting.date) + ", 2026 · " + selMeeting.time : ""}
        footer={selMeeting ? (
          <div className="btnrow">
            <Btn onClick={() => { setMeetings((ms) => ms.filter((m) => m.id !== selMeeting.id)); setSel(null); notify(T("cal.meetingCancelled")); }}>{T("cal.cancelMeeting")}</Btn>
          </div>
        ) : null}>
        {selMeeting ? (
          <div>
            <KV k={T("cal.when")} v={prettyDate(selMeeting.date) + " · " + selMeeting.time + " · " + TV(selMeeting.dur)} />
            <KV k={T("cal.where")} v={TV(selMeeting.where)} />
            <div className="lineitems">
              <div className="li-head">{T("cal.attendees")}</div>
              {selMeeting.who.map((w) => (
                <div key={w} className="li-row">
                  <span className="cellwho"><Avatar name={w} size={24} /><span>{w}</span></span>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </Drawer>

      <NewMeetingModal open={showNew} presetDate={presetDate} onClose={() => setShowNew(false)} onCreate={(m) => {
        setMeetings((ms) => [...ms, m]);
        setShowNew(false);
        notify(T("cal.meetingScheduled", { date: prettyDate(m.date), time: m.time }));
      }} />
    </div>
  );
}

function NewMeetingModal({ open, presetDate, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const team = ["Lena Ortiz", "Tom Vance", "Dana Whitfield", "Ava Reyes", "Noah Brandt", "Priya Nair"];
  const [title, setTitle] = useState("");
  const [date, setDate] = useState(CAL_TODAY);
  const [time, setTime] = useState("10:00");
  const [dur, setDur] = useState("1h");
  const [where, setWhere] = useState("Meeting room A");
  const [who, setWho] = useState([D.user.name]);
  const [err, setErr] = useState("");

  useEffect(() => {
    if (open) { setTitle(""); setDate(presetDate || CAL_TODAY); setTime("10:00"); setDur("1h"); setWhere("Meeting room A"); setWho([D.user.name]); setErr(""); }
  }, [open, presetDate]);

  const toggleWho = (w) => setWho((ws) => ws.includes(w) ? ws.filter((x) => x !== w) : [...ws, w]);

  const save = () => {
    if (!title.trim()) { setErr(T("cal.errTitle")); return; }
    if (who.length === 0) { setErr(T("cal.errAttendee")); return; }
    onCreate({ id: "MT-13", title: title.trim(), date, time, dur, who, where });
  };

  return (
    <Modal open={open} onClose={onClose} title={T("cal.newMeeting")} sub={T("cal.newMeetingSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("cal.schedule")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("common.title")} error={err}>
        <Input placeholder={T("cal.titlePlaceholder")} value={title} onChange={(e) => setTitle(e.target.value)} />
      </Field>
      <div className="formgrid three">
        <Field label={T("common.date")}>
          <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        </Field>
        <Field label={T("cal.time")}>
          <Input type="time" value={time} onChange={(e) => setTime(e.target.value)} />
        </Field>
        <Field label={T("cal.duration")}>
          <SearchSelect options={["30m", "45m", "1h", "1h 30m", "2h", "3h"]} value={dur} onChange={setDur} />
        </Field>
      </div>
      <Field label={T("cal.where")}>
        <SearchSelect options={["Meeting room A", "Meeting room B", "Video call", "On site"]} value={where} onChange={setWhere} onCreate={(v) => setWhere(v)} addLabel={T("cal.addPlace")} />
      </Field>
      <div className="formsec">{T("cal.attendees")}</div>
      <PeoplePicker selected={who} onToggle={toggleWho} />
    </Modal>
  );
}

/* Searchable multi-select over the employee directory (name or email) */
function PeoplePicker({ selected, onToggle }) {
  const { useState, useRef, useEffect } = React;
  const [q, setQ] = useState("");
  const rootRef = useRef(null);

  // keep the results visible inside the modal's scroll area
  useEffect(() => {
    if (q.trim() === "" || !rootRef.current) return;
    const body = rootRef.current.closest(".drawer-body");
    if (body) {
      const t = setTimeout(() => { body.scrollTo({ top: body.scrollHeight, behavior: "smooth" }); }, 60);
      return () => clearTimeout(t);
    }
  }, [q, selected.length]);

  const emailFor = (name) => name.toLowerCase().replace(/[^a-z ]/g, "").split(" ").join(".") + "@vision.co";
  const people = D.employees.map((e) => ({ name: e.name, email: emailFor(e.name), role: e.role }));
  // make sure current user + CRM owners are findable too
  ["Lena Ortiz", "Dana Whitfield"].forEach((n) => {
    if (!people.some((p) => p.name === n)) people.push({ name: n, email: emailFor(n), role: n === "Lena Ortiz" ? "Operations Director" : "Account Manager" });
  });

  const query = q.trim().toLowerCase();
  const matches = query === "" ? [] : people.filter((p) =>
    !selected.includes(p.name) &&
    (p.name.toLowerCase().includes(query) || p.email.includes(query))
  ).slice(0, 4);

  return (
    <div className="ppick" ref={rootRef}>
      {selected.length ? (
        <div className="ppick-chips">
          {selected.map((name) => (
            <span key={name} className="ppick-chip">
              <Avatar name={name} size={20} />
              {name}
              <button onClick={() => onToggle(name)} aria-label={T("cal.removeAttendee", { name: name })}><Icon name="x" size={12} stroke={2.4} /></button>
            </span>
          ))}
        </div>
      ) : null}
      <div className="searchbox" style={{ width: "100%" }}>
        <Icon name="search" size={15} />
        <input placeholder={T("cal.searchByNameOrEmail")} value={q} onChange={(e) => setQ(e.target.value)} />
      </div>
      {query !== "" ? (
        <div className="ppick-results">
          {matches.map((p) => (
            <button key={p.name} className="ppick-row" onClick={() => { onToggle(p.name); setQ(""); }}>
              <Avatar name={p.name} size={26} />
              <span className="who2"><b>{p.name}</b><small className="mono">{p.email}</small></span>
              <span className="dim" style={{ fontSize: 11.5 }}>{TV(p.role)}</span>
            </button>
          ))}
          {matches.length === 0 ? <p className="dim" style={{ fontSize: 12.5, padding: "8px 4px", margin: 0 }}>{T("cal.noOneMatches", { q: q })}</p> : null}
        </div>
      ) : null}
    </div>
  );
}
window.CalendarTab = CalendarTab;