// Sales & CRM module — Pipeline · Leads · Clients · Activities
const CRM_STAGES = ["New", "Qualified", "Quoted", "Negotiating", "Won"];

function CRM() {
  const { useState, useEffect } = React;
  const [tab, setTab] = useState("pipeline");
  const [stages, setStages] = useState(D.crm.stages || CRM_STAGES);
  const [addingStage, setAddingStage] = useState(false);
  const [stageDraft, setStageDraft] = useState("");
  const [deals, setDeals] = useState(D.crm.deals);
  const [leads, setLeads] = useState(D.crm.leads);
  const [clients, setClients] = useState(D.crm.clients);
  const [acts, setActs] = useState(D.crm.activities);
  const [selDeal, setSelDeal] = useState(null);
  const [selClient, setSelClient] = useState(null);
  const [showNewDeal, setShowNewDeal] = useState(false);
  const [showNewLead, setShowNewLead] = useState(false);
  const [showNewClient, setShowNewClient] = useState(false);
  const [clientQuery, setClientQuery] = useState("");
  const [dragId, setDragId] = useState(null);
  const [dragOver, setDragOver] = useState(null);

  useEffect(() => { D.crm.deals = deals; D.crm.leads = leads; D.crm.clients = clients; D.crm.activities = acts; D.crm.stages = stages; }, [deals, leads, clients, acts, stages]);

  const addStage = () => {
    const v = stageDraft.trim();
    if (!v) { setAddingStage(false); setStageDraft(""); return; }
    if (stages.some((s) => s.toLowerCase() === v.toLowerCase())) { notify(T("crm.stageExists", { name: v })); return; }
    setStages((ss) => {
      const wonIdx = ss.indexOf("Won");
      return wonIdx === -1 ? [...ss, v] : [...ss.slice(0, wonIdx), v, ...ss.slice(wonIdx)];
    });
    setAddingStage(false); setStageDraft("");
    notify(T("crm.stageAdded", { name: v }));
  };

  const open = deals.filter((d) => d.stage !== "Won" && d.stage !== "Lost");
  const pipelineValue = open.reduce((s, d) => s + d.value, 0);
  const wonJune = deals.filter((d) => d.stage === "Won").reduce((s, d) => s + d.value, 0);
  const overdueActs = acts.filter((a) => !a.done && (a.due === "Jun 11" || a.due === "Jun 12" || a.due === "Jun 10")).length;
  const newLeads = leads.filter((l) => l.status === "New").length;

  const deal = selDeal ? deals.find((d) => d.id === selDeal) : null;
  const clientObj = selClient ? clients.find((c) => c.name === selClient) : null;

  const setStage = (id, stage, quiet) => {
    setDeals((ds) => ds.map((d) => (d.id === id ? { ...d, stage } : d)));
    if (!quiet) notify(stage === "Won" ? T("crm.dealWon") : stage === "Lost" ? T("crm.dealLost") : T("crm.movedToStage", { stage: TV(stage) }));
    if (stage === "Won" || stage === "Lost") setSelDeal(null);
  };

  const handleDrop = (st) => {
    if (dragId) {
      const d = deals.find((x) => x.id === dragId);
      if (d && d.stage !== st) {
        setStage(dragId, st, true);
        notify(st === "Won" ? T("crm.dealTitleWon", { title: d.title }) : T("crm.dealMoved", { title: d.title, stage: TV(st) }));
      }
    }
    setDragId(null); setDragOver(null);
  };

  const addClient = (c) => {
    if (clients.some((x) => x.name.toLowerCase() === c.name.toLowerCase())) { notify(T("crm.clientExists", { name: c.name })); return false; }
    setClients((cs) => [c, ...cs]);
    if (!D.clients.includes(c.name)) D.clients = [c.name, ...D.clients];
    notify(T("acct.clientAdded", { name: c.name }));
    return true;
  };

  const convertLead = (lead) => {
    setLeads((ls) => ls.map((l) => (l.id === lead.id ? { ...l, status: "Converted" } : l)));
    addClient({ name: lead.name, contact: lead.contact, phone: "—", email: "—", terms: "Net 30" });
    setDeals((ds) => [{ id: "DL-091", title: lead.interest, client: lead.name, value: lead.est, stage: "Qualified", owner: "Tom Vance", close: "Jul 25" }, ...ds]);
    setTab("pipeline");
    notify(T("crm.leadConverted", { name: lead.name }));
  };

  const invoicesFor = (name) => D.invoices.filter((i) => i.client === name);
  const openBalance = (name) => invoicesFor(name).filter((i) => i.status === "Sent" || i.status === "Overdue").reduce((s, i) => s + i.amount, 0);

  if (clientObj) {
    return (
      <ClientPage client={clientObj} deals={deals} acts={acts} setActs={setActs}
        invoices={invoicesFor(clientObj.name)} openBalance={openBalance(clientObj.name)}
        onBack={() => setSelClient(null)} />
    );
  }

  return (
    <div className="page" data-screen-label="Sales & CRM">
      <KpiBar>
        <Stat label={T("crm.pipelineValue")} value={money(pipelineValue)} sub={T("crm.openDealsN", { n: open.length })} />
        <Stat label={T("crm.wonMonth", { month: TV("June") })} value={money(wonJune)} sub={T("crm.dealsClosedN", { n: deals.filter((d) => d.stage === "Won").length })} />
        <Stat label={T("crm.newLeads")} value={String(newLeads)} sub={T("crm.leadsTotalN", { n: leads.length })} />
        <Stat label={T("crm.overdueFollowUps")} value={String(overdueActs)} sub={T("crm.acrossTheTeam")} />
      </KpiBar>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "pipeline", label: T("crm.pipeline"), count: open.length },
        { id: "leads", label: T("crm.leads"), count: leads.filter((l) => l.status !== "Converted" && l.status !== "Lost").length },
        { id: "clients", label: T("crm.clients"), count: clients.length },
        { id: "activities", label: T("crm.activities"), count: acts.filter((a) => !a.done).length }
      ]} />

      {tab === "pipeline" ? (
        <div>
          <div className="toolbar" style={{ padding: "0 0 12px" }}>
            <span className="dim" style={{ fontSize: 13 }}>{T("crm.dragHint")}</span>
            <Btn variant="primary" icon="plus" onClick={() => setShowNewDeal(true)}>{T("crm.newDeal")}</Btn>
          </div>
          <div className="kb" style={{ gridTemplateColumns: "repeat(" + stages.length + ", minmax(0, 1fr)) " + (addingStage ? "210px" : "44px") }}>
            {stages.map((st) => {
              const col = deals.filter((d) => d.stage === st);
              const sum = col.reduce((s, d) => s + d.value, 0);
              return (
                <div key={st}
                  className={"kb-col" + (st === "Won" ? " won" : "") + (dragOver === st ? " over" : "")}
                  onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; if (dragOver !== st) setDragOver(st); }}
                  onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOver(null); }}
                  onDrop={(e) => { e.preventDefault(); handleDrop(st); }}>
                  <div className="kb-head">
                    <span>{TV(st)}</span>
                    <span className="kb-meta">{col.length}{sum ? " · " + money(sum) : ""}</span>
                  </div>
                  {col.map((d) => (
                    <button key={d.id} className={"kb-card" + (dragId === d.id ? " dragging" : "")}
                      draggable="true"
                      onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", d.id); setDragId(d.id); }}
                      onDragEnd={() => { setDragId(null); setDragOver(null); }}
                      onClick={() => setSelDeal(d.id)}>
                      <span className="kb-title">{d.title}</span>
                      <span className="kb-client">{d.client}</span>
                      <span className="kb-foot">
                        <span className="mono strong">{money(d.value)}</span>
                        <Avatar name={d.owner} size={22} />
                      </span>
                    </button>
                  ))}
                  {col.length === 0 ? <div className="kb-empty">{dragOver === st ? T("crm.dropHere") : T("crm.empty")}</div> : null}
                </div>
              );
            })}
            {addingStage ? (
              <div className="kb-col kb-addcol">
                <input className="input" autoFocus placeholder={T("crm.stageNamePlaceholder")} value={stageDraft}
                  onChange={(e) => setStageDraft(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter") addStage(); if (e.key === "Escape") { setAddingStage(false); setStageDraft(""); } }} />
                <div className="btnrow">
                  <Btn small variant="primary" onClick={addStage}>{T("common.add")}</Btn>
                  <Btn small onClick={() => { setAddingStage(false); setStageDraft(""); }}>{T("common.cancel")}</Btn>
                </div>
              </div>
            ) : (
              <button className="kb-add" onClick={() => setAddingStage(true)} title={T("crm.addStage")}>
                <Icon name="plus" size={16} />
              </button>
            )}
          </div>
        </div>
      ) : null}

      {tab === "leads" ? (
        <><div className="toolbar page-toolbar">
            <span className="dim" style={{ fontSize: 13 }}>{T("crm.leadsHint")}</span>
            <Btn variant="primary" icon="plus" onClick={() => setShowNewLead(true)}>{T("crm.newLead")}</Btn>
          </div>
        <section className="card">
          <DataTable rowKey={(r) => r.id} rows={leads} cols={[
            { k: "id", label: T("common.ref"), w: "80px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "name", label: T("crm.lead"), render: (r) => <span className="cellwho"><Avatar name={r.name} size={26} /><span className="who2"><b>{r.name}</b><small>{r.contact}</small></span></span> },
            { k: "interest", label: T("crm.interestedIn") },
            { k: "source", label: T("crm.source"), w: "100px", render: (r) => <span className="dim">{TV(r.source)}</span> },
            { k: "est", label: T("crm.estValue"), align: "right", w: "100px", render: (r) => <span className="mono strong">{money(r.est)}</span> },
            { k: "status", label: T("common.status"), w: "110px", render: (r) => <Badge tone={r.status === "Converted" ? "green" : r.status === "Lost" ? "red" : r.status === "Qualified" ? "blue" : r.status === "Contacted" ? "amber" : "neutral"}>{r.status}</Badge> },
            { k: "act", label: "", align: "right", w: "130px", render: (r) => (r.status !== "Converted" && r.status !== "Lost") ? (
                <Btn small variant="subtle" onClick={() => convertLead(r)}>{T("crm.convertToDeal")}</Btn>
              ) : null }
          ]} />
        </section></>
      ) : null}

      {tab === "clients" ? (
        <><div className="toolbar page-toolbar">
            <div className="searchbox">
              <Icon name="search" size={15} />
              <input placeholder={T("crm.searchClients")} value={clientQuery} onChange={(e) => setClientQuery(e.target.value)} />
            </div>
            <Btn variant="primary" icon="plus" onClick={() => setShowNewClient(true)}>{T("acct.newClient")}</Btn>
          </div>
        <section className="card">
          <DataTable rowKey={(r) => r.name} onRow={(r) => setSelClient(r.name)}
            rows={clients.filter((c) => {
              const q = clientQuery.trim().toLowerCase();
              if (!q) return true;
              return (c.name + " " + (c.contact || "")).toLowerCase().includes(q);
            })}
            empty={clientQuery.trim() ? T("crm.noClientsMatch", { q: clientQuery.trim() }) : T("crm.noClientsYet")} cols={[
            { k: "name", label: T("common.client"), render: (r) => <span className="cellwho"><Avatar name={r.name} size={28} /><span className="who2"><b>{r.name}</b><small>{r.contact}</small></span></span> },
            { k: "phone", label: T("common.phone"), w: "130px", render: (r) => <span className="mono dim" style={{ fontSize: 12 }}>{r.phone}</span> },
            { k: "terms", label: T("crm.terms"), w: "90px", render: (r) => <span className="dim">{TV(r.terms)}</span> },
            { k: "billed", label: T("crm.totalBilled"), align: "right", w: "110px", render: (r) => <span className="mono">{money(invoicesFor(r.name).reduce((s, i) => s + i.amount, 0))}</span> },
            { k: "balance", label: T("crm.openBalance"), align: "right", w: "120px", render: (r) => {
                const b = openBalance(r.name);
                return <span className="mono strong" style={{ color: b > 0 ? "var(--amber)" : "var(--ink2)" }}>{money(b)}</span>;
              } }
          ]} />
        </section></>
      ) : null}

      {tab === "activities" ? (
        <><div className="toolbar page-toolbar">
            <span className="dim" style={{ fontSize: 13 }}>{T("crm.activitiesHint")}</span>
          </div>
        <section className="card">
          <ul className="actlist">
            {acts.map((a) => (
              <li key={a.id} className={"act-row" + (a.done ? " done" : "")}>
                <button className={"act-check" + (a.done ? " on" : "")}
                  onClick={() => { setActs((xs) => xs.map((x) => (x.id === a.id ? { ...x, done: !x.done } : x))); }}
                  aria-label={T("crm.toggleDone")}>
                  {a.done ? <Icon name="check" size={13} stroke={2.6} /> : null}
                </button>
                <Badge tone={a.type === "Call" ? "blue" : a.type === "Meeting" ? "amber" : "neutral"}>{a.type}</Badge>
                <span className="act-main">
                  <b>{a.what}</b>
                  <small>{a.who}</small>
                </span>
                <span className="act-due mono">{a.due}</span>
                <Avatar name={a.owner} size={24} />
              </li>
            ))}
          </ul>
        </section></>
      ) : null}

      <Drawer open={!!deal} onClose={() => setSelDeal(null)}
        title={deal ? deal.title : ""} sub={deal ? deal.id + " · " + deal.client : ""}
        footer={deal && deal.stage !== "Won" && deal.stage !== "Lost" ? (
          <div className="btnrow">
            <Btn variant="primary" icon="check" onClick={() => setStage(deal.id, "Won")}>{T("crm.markWon")}</Btn>
            <Btn onClick={() => setStage(deal.id, "Lost")}>{T("crm.markLost")}</Btn>
          </div>
        ) : null}>
        {deal ? (
          <div>
            <div className="amount-hero">
              <span className="display">{money(deal.value)}</span>
              <Badge tone={deal.stage === "Won" ? "green" : deal.stage === "Lost" ? "red" : "blue"}>{deal.stage}</Badge>
            </div>
            <KV k={T("common.client")} v={deal.client} />
            <KV k={T("crm.owner")} v={deal.owner} />
            <KV k={T("crm.expectedClose")} v={deal.close + ", 2026"} />
            {deal.stage !== "Won" && deal.stage !== "Lost" ? (
              <div className="lineitems">
                <div className="li-head">{T("crm.stage")}</div>
                <div className="chips" style={{ marginTop: 4 }}>
                  {stages.filter((s) => s !== "Won").map((s) => (
                    <button key={s} className={"chip" + (deal.stage === s ? " on" : "")} onClick={() => setStage(deal.id, s)}>{TV(s)}</button>
                  ))}
                </div>
              </div>
            ) : null}
            <div className="lineitems">
              <div className="li-head">{T("crm.openActivities")}</div>
              {acts.filter((a) => !a.done && a.who.includes(deal.id)).map((a) => (
                <div key={a.id} className="li-row">
                  <span><Badge tone={a.type === "Call" ? "blue" : "amber"}>{a.type}</Badge></span>
                  <span className="dim" style={{ flex: 1, marginInlineStart: 10 }}>{a.what}</span>
                  <span className="mono">{a.due}</span>
                </div>
              ))}
              {acts.filter((a) => !a.done && a.who.includes(deal.id)).length === 0 ? <p className="dim" style={{ margin: "6px 0 0", fontSize: 13 }}>{T("crm.noOpenActivities")}</p> : null}
            </div>
          </div>
        ) : null}
      </Drawer>

      <NewDealModal open={showNewDeal} clients={clients} onClose={() => setShowNewDeal(false)} onCreate={(d) => {
        setDeals((ds) => [d, ...ds]); setShowNewDeal(false); notify(T("crm.dealAdded", { title: d.title }));
      }} />
      <NewLeadModal open={showNewLead} onClose={() => setShowNewLead(false)} onCreate={(l) => {
        setLeads((ls) => [l, ...ls]); setShowNewLead(false); notify(T("crm.leadCaptured", { name: l.name }));
      }} />
      <NewClientModal open={showNewClient} onClose={() => setShowNewClient(false)} onCreate={(c) => {
        if (addClient(c)) setShowNewClient(false);
      }} />
    </div>
  );
}

/* ---------- Client subpage ---------- */
function ClientPage({ client, deals, acts, setActs, invoices, openBalance, onBack }) {
  const { useState } = React;
  const [tab, setTab] = useState("info");
  const myDeals = deals.filter((d) => d.client === client.name);
  const totalBilled = invoices.reduce((s, i) => s + i.amount, 0);
  const myActs = acts.filter((a) => a.who.split(" · ")[0] === client.name);
  const openActs = myActs.filter((a) => !a.done).length;
  const pipeline = myDeals.filter((d) => d.stage !== "Won" && d.stage !== "Lost").reduce((s, d) => s + d.value, 0);

  return (
    <div className="page" data-screen-label={"Client · " + client.name}>
      <div className="crumb">
        <button className="crumb-back" onClick={onBack}>
          <Icon name="chevR" size={14} style={{ transform: "rotate(180deg)" }} />
          {T("crm.clients")}
        </button>
      </div>

      <section className="card client-head">
        <Avatar name={client.name} size={52} />
        <div className="client-id">
          <h3 className="display">{client.name}</h3>
          <span className="dim">{client.contact} · {TV(client.terms)}</span>
        </div>
        <div className="client-stats">
          <div className="client-stat"><small>{T("crm.openBalance")}</small><b className="mono" style={{ color: openBalance > 0 ? "var(--amber)" : "var(--ink)" }}>{money(openBalance)}</b></div>
          <div className="client-stat"><small>{T("crm.totalBilled")}</small><b className="mono">{money(totalBilled)}</b></div>
          <div className="client-stat"><small>{T("crm.inPipeline")}</small><b className="mono">{money(pipeline)}</b></div>
          <div className="client-stat"><small>{T("crm.openFollowUps")}</small><b className="mono">{openActs}</b></div>
        </div>
      </section>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "info", label: T("crm.generalInformation") },
        { id: "invoices", label: T("acct.invoices"), count: invoices.length },
        { id: "deals", label: T("crm.contracts"), count: myDeals.length },
        { id: "activity", label: T("crm.activityLogs"), count: myActs.length }
      ]} />

      {tab === "info" ? (
        <div className="grid-23">
          <section className="card" style={{ padding: "var(--card-pad)" }}>
            <SectionHead title={T("crm.details")} />
            <KV k={T("acct.contactPerson")} v={client.contact} />
            <KV k={T("common.phone")} v={client.phone} mono />
            <KV k={T("common.email")} v={client.email} mono />
            <KV k={T("acct.paymentTerms")} v={TV(client.terms)} />
            <KV k={T("crm.clientSince")} v="Jan 2024" />
          </section>
          <section className="card" style={{ padding: "var(--card-pad)", alignSelf: "start" }}>
            <SectionHead title={T("crm.atAGlance")} />
            <KV k={T("crm.openInvoices")} v={T("crm.xOfY", { x: invoices.filter((i) => i.status === "Sent" || i.status === "Overdue").length, y: invoices.length })} />
            <KV k={T("crm.activeContracts")} v={String(myDeals.filter((d) => d.stage !== "Won" && d.stage !== "Lost").length)} />
            <KV k={T("crm.wonToDate")} v={money(myDeals.filter((d) => d.stage === "Won").reduce((s, d) => s + d.value, 0))} mono />
            <KV k={T("crm.lastActivity")} v={myActs.length ? myActs[0].due + " · " + TV(myActs[0].type) : "—"} />
          </section>
        </div>
      ) : null}

      {tab === "invoices" ? (
        <section className="card">
          <DataTable rowKey={(r) => r.id} rows={invoices} empty={T("crm.noInvoicesYet")} tableId="client-invoices" cols={[
            { k: "id", label: T("acct.invoice"), w: "110px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "issued", label: T("acct.issued"), w: "100px", render: (r) => <span className="dim">{r.issued}</span> },
            { k: "due", label: T("acct.due"), w: "100px", render: (r) => <span className="dim">{r.due}</span> },
            { k: "amount", label: T("common.amount"), align: "right", render: (r) => <span className="mono strong">{money(r.amount)}</span> },
            { k: "status", label: T("common.status"), w: "120px", render: (r) => <Badge>{r.status}</Badge> }
          ]} />
        </section>
      ) : null}

      {tab === "deals" ? (
        <section className="card">
          <DataTable rowKey={(r) => r.id} rows={myDeals} empty={T("crm.noContractsYet")} tableId="client-deals" cols={[
            { k: "id", label: T("common.ref"), w: "90px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "title", label: T("crm.contract"), render: (r) => <span className="who2"><b>{r.title}</b><small>{T("crm.closesOn", { date: r.close })}</small></span> },
            { k: "owner", label: T("crm.owner"), w: "150px", render: (r) => <span className="cellwho"><Avatar name={r.owner} size={22} /><span className="dim">{r.owner}</span></span> },
            { k: "value", label: T("crm.value"), align: "right", w: "110px", render: (r) => <span className="mono strong">{money(r.value)}</span> },
            { k: "stage", label: T("crm.stage"), w: "130px", render: (r) => <Badge tone={r.stage === "Won" ? "green" : r.stage === "Lost" ? "red" : "blue"}>{r.stage}</Badge> }
          ]} />
        </section>
      ) : null}

      {tab === "activity" ? (
        <section className="card" style={{ padding: "var(--card-pad)", maxWidth: 720 }}>
          <ClientActivityLog client={client.name} acts={acts} setActs={setActs} />
        </section>
      ) : null}
    </div>
  );
}

/* ---------- Client activity log ---------- */
function ClientActivityLog({ client, acts, setActs }) {
  const { useState } = React;
  const [type, setType] = useState("Note");
  const [text, setText] = useState("");
  const [due, setDue] = useState("");

  const mine = acts.filter((a) => a.who.split(" · ")[0] === client);

  const add = () => {
    const v = text.trim();
    if (!v) { notify(T("crm.errWriteWhatHappened")); return; }
    const isNote = type === "Note";
    setActs((xs) => [{
      id: "AC-" + (221 + xs.length),
      type, what: v, who: client,
      owner: D.user.name,
      due: isNote || !due ? "Jun 13" : prettyDate(due),
      done: isNote
    }, ...xs]);
    setText(""); setDue("");
    notify(isNote ? T("crm.activityLogged", { type: TV(type), client: client }) : T("crm.activityScheduled", { type: TV(type), client: client }));
  };

  return (
    <div className="lineitems">
      <div className="li-head">{T("crm.activity")}</div>
      <div className="alog">
        <div className="chips" style={{ marginBottom: 8 }}>
          {["Note", "Call", "Meeting", "Task"].map((t) => (
            <button key={t} className={"chip" + (type === t ? " on" : "")} onClick={() => setType(t)}>{TV(t)}</button>
          ))}
        </div>
        <textarea className="input area" rows="2"
          placeholder={type === "Note" ? T("crm.notePlaceholder") : T("crm.taskPlaceholder")}
          value={text} onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) add(); }}></textarea>
        <div className="alog-foot">
          {type !== "Note" ? (
            <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} style={{ width: 150, height: 32, fontSize: 12 }} />
          ) : <span className="dim" style={{ fontSize: 12 }}>{T("crm.loggedAsDone")}</span>}
          <Btn small variant="primary" icon="plus" onClick={add}>{T("crm.logType", { type: TV(type) })}</Btn>
        </div>
      </div>
      {mine.map((a) => (
        <div key={a.id} className="li-row" style={{ alignItems: "flex-start" }}>
          <span><Badge tone={a.type === "Call" ? "blue" : a.type === "Meeting" ? "amber" : a.type === "Note" ? "neutral" : "green"}>{a.type}</Badge></span>
          <span style={{ flex: 1, marginInlineStart: 10 }}>
            <span style={{ display: "block", color: "var(--ink)" }}>{a.what}</span>
            <span className="dim" style={{ fontSize: 11.5 }}>{a.owner} · {a.due}</span>
          </span>
          {!a.done ? (
            <button className="act-check" style={{ marginInlineStart: 8 }} aria-label={T("crm.markDone")}
              onClick={() => setActs((xs) => xs.map((x) => (x.id === a.id ? { ...x, done: true } : x)))}></button>
          ) : <span className="act-check on" style={{ marginInlineStart: 8 }}><Icon name="check" size={13} stroke={2.6} /></span>}
        </div>
      ))}
      {mine.length === 0 ? <p className="dim" style={{ margin: "6px 0 0", fontSize: 13 }}>{T("crm.noActivityLogged")}</p> : null}
    </div>
  );
}

function NewDealModal({ open, clients, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const [title, setTitle] = useState("");
  const [client, setClient] = useState("");
  const [value, setValue] = useState("");
  const [owner, setOwner] = useState("Tom Vance");
  const [close, setClose] = useState("2026-07-15");
  const [errs, setErrs] = useState({});
  useEffect(() => { if (open) { setTitle(""); setClient(""); setValue(""); setOwner("Tom Vance"); setClose("2026-07-15"); setErrs({}); } }, [open]);

  const save = () => {
    const e = {};
    if (!title.trim()) e.title = T("crm.errDealName");
    if (!client) e.client = T("crm.errChooseClient");
    const n = parseFloat(value);
    if (!value || isNaN(n) || n <= 0) e.value = T("crm.errValueAboveZero");
    setErrs(e);
    if (Object.keys(e).length) return;
    onCreate({ id: "DL-092", title: title.trim(), client, value: Math.round(n), stage: "New", owner, close: prettyDate(close) });
  };

  return (
    <Modal open={open} onClose={onClose} title={T("crm.newDeal")} sub={T("crm.newDealSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("crm.addDeal")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("crm.dealName")} error={errs.title}>
        <Input placeholder={T("crm.dealNamePlaceholder")} value={title} onChange={(e) => setTitle(e.target.value)} />
      </Field>
      <Field label={T("common.client")} error={errs.client}>
        <SearchSelect options={clients.map((c) => c.name)} placeholder={T("crm.chooseClient")} value={client} onChange={setClient} />
      </Field>
      <div className="formgrid">
        <Field label={T("crm.valueUsd")} error={errs.value}>
          <Input type="number" min="0" step="100" placeholder="0" value={value} onChange={(e) => setValue(e.target.value)} />
        </Field>
        <Field label={T("crm.expectedClose")}>
          <Input type="date" value={close} onChange={(e) => setClose(e.target.value)} />
        </Field>
      </div>
      <Field label={T("crm.owner")}>
        <SearchSelect options={["Tom Vance", "Dana Whitfield"]} value={owner} onChange={setOwner} />
      </Field>
    </Modal>
  );
}

function NewLeadModal({ open, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const [name, setName] = useState("");
  const [contact, setContact] = useState("");
  const [interest, setInterest] = useState("");
  const [source, setSource] = useState("Website");
  const [est, setEst] = useState("");
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setName(""); setContact(""); setInterest(""); setSource("Website"); setEst(""); setErr(""); } }, [open]);

  const save = () => {
    if (!name.trim()) { setErr(T("crm.errLeadName")); return; }
    onCreate({ id: "LD-115", name: name.trim(), contact: contact.trim() || "—", interest: interest.trim() || "General inquiry", source, status: "New", est: Math.round(parseFloat(est)) || 0 });
  };

  return (
    <Modal open={open} onClose={onClose} title={T("crm.newLead")} sub={T("crm.newLeadSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("crm.captureLead")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("crm.companyOrName")} error={err}>
        <Input placeholder={T("crm.companyPlaceholder")} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <div className="formgrid">
        <Field label={T("acct.contactPerson")}>
          <Input placeholder={T("crm.contactPlaceholder")} value={contact} onChange={(e) => setContact(e.target.value)} />
        </Field>
        <Field label={T("crm.source")}>
          <SearchSelect options={["Website", "Referral", "Instagram", "Walk-in", "Phone", "Trade show"]} value={source} onChange={setSource} />
        </Field>
      </div>
      <Field label={T("crm.interestedIn")}>
        <Input placeholder={T("crm.interestPlaceholder")} value={interest} onChange={(e) => setInterest(e.target.value)} />
      </Field>
      <Field label={T("crm.estimatedValueUsd")}>
        <Input type="number" min="0" step="100" placeholder="0" value={est} onChange={(e) => setEst(e.target.value)} />
      </Field>
    </Modal>
  );
}

function NewClientModal({ open, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const [name, setName] = useState("");
  const [contact, setContact] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [terms, setTerms] = useState("Net 30");
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setName(""); setContact(""); setPhone(""); setEmail(""); setTerms("Net 30"); setErr(""); } }, [open]);

  const save = () => {
    if (!name.trim()) { setErr(T("crm.errClientName")); return; }
    onCreate({ name: name.trim(), contact: contact.trim() || "—", phone: phone.trim() || "—", email: email.trim() || "—", terms });
  };

  return (
    <Modal open={open} onClose={onClose} title={T("acct.newClient")} sub={T("crm.newClientSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("acct.addClient")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("acct.clientName")} error={err}>
        <Input placeholder={T("crm.companyPlaceholder")} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <div className="formgrid">
        <Field label={T("acct.contactPerson")}>
          <Input value={contact} onChange={(e) => setContact(e.target.value)} />
        </Field>
        <Field label={T("acct.paymentTerms")}>
          <SearchSelect options={["Net 15", "Net 30", "Net 45", "Net 60", "Due on receipt"]} value={terms} onChange={setTerms} />
        </Field>
        <Field label={T("common.phone")}>
          <Input placeholder="+1 555 0100" value={phone} onChange={(e) => setPhone(e.target.value)} />
        </Field>
        <Field label={T("common.email")}>
          <Input placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
        </Field>
      </div>
    </Modal>
  );
}
window.CRM = CRM;