/* Module B, firm scope: Work (My Tasks + cross-company kanban) + Contacts + shared TaskDetail. */

function priorityRank(p) { return { critical: 0, high: 1, medium: 2, low: 3 }[p]; }

function TaskCard({ task, onClick, onDragStart, draggable }) {
  const c = VCP.companyById(task.company);
  return <div draggable={draggable} onDragStart={onDragStart} onClick={onClick} style={{
    background: "var(--surface-card)", border: "1px solid var(--line)", borderRadius: 10, padding: "11px 12px",
    cursor: "pointer", boxShadow: "var(--shadow-card)", transition: "all 120ms ease",
  }}>
    <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
      <span style={{ fontWeight: 600, fontSize: 12.5, lineHeight: 1.35, flex: 1 }}>{task.name}</span>
      <Badge variant={PRIORITY_VARIANT[task.priority]}>{task.priority}</Badge>
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 9 }}>
      {c && <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--ink-soft)" }}><span style={{ width: 8, height: 8, borderRadius: 2, background: c.color }} />{c.name}</span>}
    </div>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 9 }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, color: task.overdue ? "var(--danger)" : "var(--ink-soft)", fontWeight: task.overdue ? 600 : 400 }} className="tabular">
        <Icon name={task.overdue ? "alert" : "calendar"} size={12} />{task.due}
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        {task.subTotal > 0 && <span style={{ fontSize: 10.5, color: "var(--ink-soft)" }} className="tabular">{task.subCompleted}/{task.subTotal}</span>}
        {task.assignees.length > 0 ? <Avatar name={task.assignees[0].name} size={20} /> : <span style={{ width: 20, height: 20, borderRadius: "50%", border: "1px dashed var(--line)" }} />}
      </div>
    </div>
  </div>;
}

function Kanban({ tasks, onOpen, onMove }) {
  const [dragId, setDragId] = useState(null);
  const [over, setOver] = useState(null);
  const cols = VCP.PROGRESS;
  return <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
    {cols.map(col => {
      const colTasks = tasks.filter(t => t.progress === col);
      return <div key={col} onDragOver={e => { e.preventDefault(); setOver(col); }} onDragLeave={() => setOver(o => o === col ? null : o)}
        onDrop={() => { if (dragId) onMove(dragId, col); setDragId(null); setOver(null); }}
        style={{ background: over === col ? "var(--accent-soft)" : "var(--surface-warm)", borderRadius: 12, padding: 10, transition: "background 120ms ease", minHeight: 120 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "2px 6px 10px" }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: BAND_FG[col === "completed" ? "green" : col === "started" ? "teal" : col === "planning" ? "yellow" : "red"] }}>{VCP.PROGRESS_LABEL[col]}</span>
          <span style={{ fontSize: 11, color: "var(--ink-soft)", fontWeight: 600 }} className="tabular">{colTasks.length}</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
          {colTasks.map(t => <TaskCard key={t.id} task={t} draggable onDragStart={() => setDragId(t.id)} onClick={() => onOpen(t)} />)}
        </div>
      </div>;
    })}
  </div>;
}

function TaskDetail({ task, onClose, onChange }) {
  const [t, setT] = useState(task);
  const [saveState, flash] = useSaveFlash();
  const co = VCP.companyById(t.company);
  const team = co && co.id === "helios" ? VCP.heliosTeams.management.concat(VCP.heliosTeams.deal) : (VCP.heliosTeams.deal);
  const set = (patch) => { const nt = { ...t, ...patch }; setT(nt); flash(); onChange && onChange(nt); };
  useEffect(() => setT(task), [task && task.id]);
  if (!task) return null;
  return <Drawer open={!!task} onClose={onClose} width={480} eyebrow={(co ? co.name : "") + " · " + t.project} title={t.name}
    footer={<><Btn variant="danger" icon="trash" onClick={() => { t.subTotal > 0 ? window.vcpToast?.("Cannot delete: has subtasks") : window.vcpToast?.("Task deleted (demo)"); }}>Delete</Btn><div style={{ flex: 1 }} /><SaveIndicator state={saveState} /></>}>
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <Field label="Task name"><TextInput value={t.name} onChange={e => set({ name: e.target.value })} /></Field>
      <Field label="Description"><textarea value={t.description} onChange={e => set({ description: e.target.value })} placeholder="Add a description" style={{ width: "100%", minHeight: 64, border: "1px solid var(--line)", borderRadius: 8, padding: "8px 10px", background: "var(--surface-card)", outline: "none", resize: "vertical", fontSize: 13, lineHeight: 1.5 }} /></Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="Priority"><Select value={t.priority} onChange={v => set({ priority: v })} options={["critical", "high", "medium", "low"]} width="100%" /></Field>
        <Field label="Progress"><Select value={t.progress} onChange={v => set({ progress: v })} options={VCP.PROGRESS.map(p => ({ value: p, label: VCP.PROGRESS_LABEL[p] }))} width="100%" /></Field>
        <Field label="Start date"><TextInput type="date" value={t.start} onChange={e => set({ start: e.target.value })} /></Field>
        <Field label="Due date"><TextInput type="date" value={t.due} onChange={e => set({ due: e.target.value })} /></Field>
      </div>
      <Field label="Assignees">
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 6 }}>
          {t.assignees.length === 0 && <span style={{ fontSize: 12, color: "var(--ink-faint)" }}>Unassigned</span>}
          {t.assignees.map(a => <span key={a.email} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 6px 3px 3px", background: "var(--surface-deep)", borderRadius: 100, fontSize: 12 }}>
            <Avatar name={a.name} size={20} />{a.name}<button onClick={() => set({ assignees: t.assignees.filter(x => x.email !== a.email) })} style={{ border: "none", background: "none", color: "var(--ink-faint)", cursor: "pointer", display: "flex" }}><Icon name="x" size={12} /></button>
          </span>)}
        </div>
        <Select value="" placeholder="Add assignee" width="100%" onChange={v => { const m = team.find(x => x.name === v); if (m && !t.assignees.find(a => a.name === m.name)) set({ assignees: [...t.assignees, { name: m.name, email: m.email, role: m.title }] }); }} options={team.map(m => m.name)} />
      </Field>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 13px", background: "var(--surface-deep)", borderRadius: 9 }}>
        <div><div style={{ fontWeight: 600, fontSize: 13 }}>Notifications</div><div style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>Reminder flow (Power Automate) — planned</div></div>
        <Toggle on={false} onClick={() => window.vcpToast?.("Notifications are a planned flow")} />
      </div>
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}><div className="micro">Subtasks ({t.subCompleted}/{t.subTotal})</div><Btn variant="subtle" size="sm" icon="plus" onClick={() => window.vcpToast?.("Add subtask (demo)")}>Add</Btn></div>
        {t.subTotal === 0 ? <div style={{ fontSize: 12, color: "var(--ink-faint)", padding: "6px 0" }}>No subtasks.</div> :
          Array.from({ length: t.subTotal }).map((_, i) => <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 0", borderBottom: "1px solid var(--line-soft)" }}>
            <span style={{ width: 16, height: 16, borderRadius: 5, border: "1.5px solid " + (i < t.subCompleted ? "var(--positive)" : "var(--line)"), background: i < t.subCompleted ? "var(--positive)" : "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{i < t.subCompleted && <Icon name="check" size={11} color="#fff" />}</span>
            <span style={{ fontSize: 12.5, textDecoration: i < t.subCompleted ? "line-through" : "none", color: i < t.subCompleted ? "var(--ink-soft)" : "var(--ink)" }}>Subtask {i + 1}</span>
          </div>)}
      </div>
    </div>
  </Drawer>;
}

function Toggle({ on, onClick }) {
  return <button onClick={onClick} style={{ width: 38, height: 22, borderRadius: 100, border: "none", background: on ? "var(--accent)" : "var(--line)", position: "relative", transition: "all 150ms ease", cursor: "pointer", flexShrink: 0 }}>
    <span style={{ position: "absolute", top: 2, left: on ? 18 : 2, width: 18, height: 18, borderRadius: "50%", background: "#fff", transition: "left 150ms ease", boxShadow: "0 1px 2px rgba(0,0,0,0.2)" }} />
  </button>;
}

function FirmWork({ go, scopeCompany }) {
  const [tasks, setTasks] = useState(VCP.allTasks);
  const [openTask, setOpenTask] = useState(null);
  const [adding, setAdding] = useState(false);
  const [view, setView] = useState("board");
  const [search, setSearch] = useState("");
  const [fCompany, setFCompany] = useState("");
  const [fAssignee, setFAssignee] = useState("");
  const me = "Pieter Janssen";

  const move = (id, col) => setTasks(ts => ts.map(t => t.id === id ? { ...t, progress: col, overdue: col === "completed" ? false : t.overdue } : t));
  const onChange = (nt) => setTasks(ts => ts.map(t => t.id === nt.id ? nt : t));

  let scoped = tasks;
  if (scopeCompany) scoped = scoped.filter(t => t.company === scopeCompany);
  const assignees = [...new Set(tasks.flatMap(t => t.assignees.map(a => a.name)))];
  const filtered = scoped.filter(t => {
    if (search && !(t.name + t.project + (VCP.companyById(t.company) || {}).name + t.assignees.map(a => a.name).join()).toLowerCase().includes(search.toLowerCase())) return false;
    if (fCompany && t.company !== fCompany) return false;
    if (fAssignee && !t.assignees.find(a => a.name === fAssignee)) return false;
    return true;
  });
  const myTasks = tasks.filter(t => t.assignees.find(a => a.name === me));
  const stats = { total: myTasks.length, prog: myTasks.filter(t => t.progress === "started").length, week: myTasks.filter(t => !t.overdue && t.progress !== "completed").length, overdue: myTasks.filter(t => t.overdue).length };

  const cols = [
    { key: "name", label: "Task", render: t => <span style={{ fontWeight: 600 }}>{t.name}</span> },
    { key: "company", label: "Company", render: t => { const c = VCP.companyById(t.company); return <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink-muted)" }}><span style={{ width: 8, height: 8, borderRadius: 2, background: c.color }} />{c.name}</span>; } },
    { key: "project", label: "Project", render: t => <span style={{ color: "var(--ink-soft)", fontSize: 12 }}>{t.project}</span> },
    { key: "assignees", label: "Assignee", render: t => t.assignees[0] ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Avatar name={t.assignees[0].name} size={20} />{t.assignees[0].name}</span> : <span style={{ color: "var(--ink-faint)" }}>Unassigned</span> },
    { key: "priority", label: "Priority", render: t => <Badge variant={PRIORITY_VARIANT[t.priority]}>{t.priority}</Badge> },
    { key: "progress", label: "Progress", render: t => <Badge variant={PROGRESS_VARIANT[t.progress]}>{VCP.PROGRESS_LABEL[t.progress]}</Badge> },
    { key: "due", label: "Due", align: "right", render: t => <span className="tabular" style={{ color: t.overdue ? "var(--danger)" : "var(--ink-muted)", fontWeight: t.overdue ? 600 : 400 }}>{t.due}</span> },
  ];

  return <div>
    {!scopeCompany && <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 18 }}>
      {[["My open tasks", stats.total, "list"], ["In progress", stats.prog, "clock"], ["Due this week", stats.week, "calendar"], ["Overdue", stats.overdue, "alert"]].map(([l, v, ic]) => <Card key={l} pad={14}>
        <div className="micro" style={{ display: "flex", gap: 6, alignItems: "center" }}><Icon name={ic} size={12} />{l}</div>
        <div className="tabular" style={{ fontSize: 26, fontWeight: 700, marginTop: 6, color: l === "Overdue" && v > 0 ? "var(--danger)" : "var(--ink)" }}>{v}</div>
      </Card>)}
    </div>}
    <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", marginBottom: 16 }}>
      <SearchInput value={search} onChange={setSearch} placeholder="Search tasks" width={220} />
      {!scopeCompany && <Select value={fCompany} onChange={setFCompany} options={VCP.companies.map(c => ({ value: c.id, label: c.name }))} placeholder="All companies" />}
      <Select value={fAssignee} onChange={setFAssignee} options={assignees} placeholder="All assignees" />
      <div style={{ flex: 1 }} />
      <div style={{ display: "inline-flex", background: "var(--surface-deep)", borderRadius: 8, padding: 2 }}>
        {[{ v: "board", l: "Board", i: "columns" }, { v: "list", l: "List", i: "list" }].map(o => <button key={o.v} onClick={() => setView(o.v)} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 11px", borderRadius: 6, border: "none", fontSize: 12, fontWeight: 600, background: view === o.v ? "var(--surface-card)" : "transparent", color: view === o.v ? "var(--ink)" : "var(--ink-soft)" }}><Icon name={o.i} size={13} />{o.l}</button>)}
      </div>
      <Btn size="sm" icon="plus" onClick={() => setAdding(true)}>Add task</Btn>
    </div>
    {view === "board" ? <Kanban tasks={filtered} onOpen={setOpenTask} onMove={move} /> :
      <Table columns={scopeCompany ? cols.filter(c => c.key !== "company") : cols} rows={filtered} onRowClick={setOpenTask} rowKey={t => t.id} dense />}
    {openTask && <TaskDetail task={openTask} onClose={() => setOpenTask(null)} onChange={onChange} />}
    <AddTaskModal open={adding} onClose={() => setAdding(false)} defaultCompany={scopeCompany} onCreate={t => setTasks(ts => [t, ...ts])} />
  </div>;
}

function AddTaskModal({ open, onClose, defaultCompany, onCreate }) {
  const [f, setF] = useState({ name: "", company: defaultCompany || "helios", project: "", priority: "medium", progress: "not-started", due: "", assignee: "" });
  useEffect(() => { if (open) setF(s => ({ ...s, company: defaultCompany || s.company, assignee: "" })); }, [open, defaultCompany]);
  const set = patch => setF(s => ({ ...s, ...patch }));
  const co = VCP.companyById(f.company);
  const team = co && co.id === "helios" ? VCP.heliosTeams.management.concat(VCP.heliosTeams.deal) : VCP.heliosTeams.deal;
  const projOpts = (f.company === "helios" ? VCP.heliosProjects.map(p => p.name) : []).concat(["Operational Reset", "Retention Program", "General"]);
  const create = () => {
    if (!f.name.trim()) { window.vcpToast?.("Add a task name"); return; }
    const m = team.find(x => x.name === f.assignee);
    onCreate({ id: "new" + Date.now(), name: f.name, company: f.company, project: f.project || "General", assignees: m ? [{ name: m.name, email: m.email, role: m.title }] : [], due: f.due || "2025-09-30", start: "2025-06-03", priority: f.priority, progress: f.progress, subCompleted: 0, subTotal: 0, description: "", overdue: false });
    window.vcpToast?.("Task added to the board"); onClose();
  };
  return <Modal open={open} onClose={onClose} eyebrow="Module B · Collaboration" title="Add task" width={500}
    footer={<><Btn variant="ghost" onClick={onClose}>Cancel</Btn><Btn icon="plus" onClick={create}>Add task</Btn></>}>
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <Field label="Task name"><TextInput value={f.name} onChange={e => set({ name: e.target.value })} placeholder="What needs doing?" autoFocus /></Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {!defaultCompany && <Field label="Company"><Select value={f.company} onChange={v => set({ company: v, assignee: "" })} options={VCP.companies.map(c => ({ value: c.id, label: c.name }))} width="100%" /></Field>}
        <Field label="Project"><Select value={f.project} onChange={v => set({ project: v })} options={projOpts} placeholder="General" width="100%" /></Field>
        <Field label="Priority"><Select value={f.priority} onChange={v => set({ priority: v })} options={["critical", "high", "medium", "low"]} width="100%" /></Field>
        <Field label="Progress"><Select value={f.progress} onChange={v => set({ progress: v })} options={VCP.PROGRESS.map(p => ({ value: p, label: VCP.PROGRESS_LABEL[p] }))} width="100%" /></Field>
        <Field label="Assignee"><Select value={f.assignee} onChange={v => set({ assignee: v })} options={team.map(m => m.name)} placeholder="Unassigned" width="100%" /></Field>
        <Field label="Due date"><TextInput type="date" value={f.due} onChange={e => set({ due: e.target.value })} /></Field>
      </div>
    </div>
  </Modal>;
}

/* ---------- Contacts ---------- */
function Contacts() {
  const [tab, setTab] = useState("portfolio");
  const [search, setSearch] = useState("");
  const [fCompany, setFCompany] = useState("");
  const [fCat, setFCat] = useState("");
  const [detail, setDetail] = useState(null);
  const sort = useSort("fullName", "asc");
  let list = VCP.contacts[tab].filter(c => {
    if (search && !(c.fullName + c.title + c.email + c.company).toLowerCase().includes(search.toLowerCase())) return false;
    if (fCompany && c.company !== fCompany) return false;
    if (fCat && c.category !== fCat) return false;
    return true;
  });
  list = sort.apply(list);
  const companiesIn = [...new Set(VCP.contacts[tab].map(c => c.company))];
  const cols = [
    { key: "fullName", label: "Name", render: c => <div style={{ display: "flex", alignItems: "center", gap: 10 }}><Avatar name={c.fullName} size={28} color={tab === "lexar" ? "var(--accent)" : undefined} /><span style={{ fontWeight: 600 }}>{c.fullName}</span></div> },
    { key: "title", label: "Title", render: c => <span style={{ color: "var(--ink-muted)" }}>{c.title}</span> },
    { key: "company", label: tab === "lexar" ? "Deal team" : "Company", render: c => <span style={{ color: "var(--ink-muted)" }}>{c.company}</span> },
    ...(tab === "external" ? [{ key: "category", label: "Category", render: c => <Badge variant="neutral">{c.category}</Badge> }] : []),
    { key: "email", label: "Email", render: c => <a href={"mailto:" + c.email} onClick={e => e.stopPropagation()} style={{ color: "var(--accent)" }}>{c.email}</a> },
    { key: "phone", label: "Phone", align: "right", render: c => <span className="tabular" style={{ color: "var(--ink-muted)" }}>{c.phone}</span> },
  ];
  return <div>
    <Tabs tabs={[{ key: "portfolio", label: "Portfolio", badge: VCP.contacts.portfolio.length }, { key: "lexar", label: "Firm", badge: VCP.contacts.lexar.length }, { key: "external", label: "External advisors", badge: VCP.contacts.external.length }]} active={tab} onChange={t => { setTab(t); setFCompany(""); setFCat(""); }} />
    <div style={{ display: "flex", gap: 10, marginBottom: 14, alignItems: "center" }}>
      <SearchInput value={search} onChange={setSearch} placeholder="Search contacts" />
      {tab !== "external" && <Select value={fCompany} onChange={setFCompany} options={companiesIn} placeholder={tab === "lexar" ? "All deal teams" : "All companies"} />}
      {tab === "external" && <Select value={fCat} onChange={setFCat} options={VCP.ADVISOR_CATS} placeholder="All categories" />}
      <div style={{ flex: 1 }} />
      <Btn size="sm" icon="plus" onClick={() => window.vcpToast?.("Add contact (demo)")}>Add contact</Btn>
    </div>
    <Table columns={cols} rows={list} sortCtl={sort} onRowClick={setDetail} rowKey={c => c.email} />
    <Drawer open={!!detail} onClose={() => setDetail(null)} width={400} eyebrow={detail && (detail.category || detail.company)} title={detail ? detail.fullName : ""}>
      {detail && <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}><Avatar name={detail.fullName} size={48} color={tab === "lexar" ? "var(--accent)" : undefined} /><div><div style={{ fontWeight: 700, fontSize: 15 }}>{detail.fullName}</div><div style={{ color: "var(--ink-muted)", fontSize: 13 }}>{detail.title}</div></div></div>
        {[["Company", detail.company], ["Email", detail.email], ["Phone", detail.phone], ...(detail.category ? [["Category", detail.category]] : [])].map(([l, v]) => <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", borderBottom: "1px solid var(--line-soft)" }}><span className="micro">{l}</span><span style={{ fontSize: 13, fontWeight: 500 }}>{v}</span></div>)}
        <div style={{ display: "flex", gap: 8 }}><Btn variant="ghost" size="sm" icon="mail" onClick={() => window.location.href = "mailto:" + detail.email}>Email</Btn><Btn variant="ghost" size="sm" icon="phone">Call</Btn></div>
      </div>}
    </Drawer>
  </div>;
}

function CollaborationFirm({ state, go }) {
  const [tab, setTab] = useState("work");
  return <div className="route-fade" style={{ padding: "22px 28px 60px", maxWidth: 1240, margin: "0 auto" }}>
    <SectionHeader eyebrow="Module B · Collaboration" title="Run the work"
      sub="What is on the team's plate across every company, and the firm's people graph in one directory." />
    <Tabs tabs={[{ key: "work", label: "Work", icon: "columns" }, { key: "contacts", label: "Contacts", icon: "users" }]} active={tab} onChange={setTab} />
    {tab === "work" ? <FirmWork go={go} /> : <Contacts />}
  </div>;
}

Object.assign(window, { CollaborationFirm, FirmWork, Contacts, TaskDetail, TaskCard, Kanban, Toggle });