/* Pipeline — kanban with drag-and-drop reorder between stages */

const { useState: useStatePL } = React;

function PagePipeline({ onNavigate }) {
  const [opps, setOpps] = useStatePL(window.OPPORTUNITIES);
  const [view, setView] = useStatePL("kanban");
  const [dragId, setDragId] = useStatePL(null);
  const [activeOpp, setActiveOpp] = useStatePL(null);
  const [newOpen, setNewOpen] = useStatePL(false);

  const byStage = {};
  window.OPPORTUNITY_STAGES.forEach(s => { byStage[s.id] = []; });
  opps.forEach(o => { (byStage[o.stage] || (byStage[o.stage] = [])).push(o); });

  const totalValue = opps.reduce((s, o) => s + (o.value || 0), 0);
  const weightedValue = opps.reduce((s, o) => s + (o.value || 0) * (o.probability || 0), 0);

  const moveOpp = (oppId, stage) => {
    setOpps(prev => prev.map(o => o.id === oppId ? { ...o, stage } : o));
  };

  return (
    <>
      <PageHeader
        title="Pipeline"
        actions={<>
          <div style={{ display: "flex", border: "1px solid var(--line-strong)", borderRadius: 7, overflow: "hidden", background: "var(--surface)", height: 30 }}>
            <button onClick={() => setView("kanban")} style={{
              padding: "0 10px", fontSize: 12, fontWeight: 500,
              background: view === "kanban" ? "var(--inset)" : "transparent",
              color: view === "kanban" ? "var(--ink)" : "var(--ink-3)",
              display: "inline-flex", alignItems: "center", gap: 5,
            }}><Icon name="kanban" size={12} /> Kanban</button>
            <div style={{ width: 1, background: "var(--line)" }} />
            <button onClick={() => setView("table")} style={{
              padding: "0 10px", fontSize: 12, fontWeight: 500,
              background: view === "table" ? "var(--inset)" : "transparent",
              color: view === "table" ? "var(--ink)" : "var(--ink-3)",
              display: "inline-flex", alignItems: "center", gap: 5,
            }}><Icon name="menu" size={12} /> Table</button>
          </div>
          <Button kind="secondary" size="md" icon="filter">Filter</Button>
          <Button kind="primary" size="md" icon="plus" onClick={() => setNewOpen(true)}>New opportunity</Button>
        </>}
      />

      <div className="page-pad page-pad-y" style={{ overflowX: "auto" }}>
        {view === "kanban" ? (
          <div className="kanban-board" style={{ display: "flex", gap: 14, minHeight: 600 }}>
            {window.OPPORTUNITY_STAGES.map(stage => (
              <KanbanColumn
                key={stage.id} stage={stage} opps={byStage[stage.id] || []}
                onDragOver={(e) => e.preventDefault()}
                onDrop={() => { if (dragId) { moveOpp(dragId, stage.id); setDragId(null); } }}
                onOpenOpp={(o) => setActiveOpp(o)}
                setDragId={setDragId}
              />
            ))}
          </div>
        ) : (
          <div className="scroll-x">
            <PipelineTable opps={opps} onOpen={(o) => setActiveOpp(o)} />
          </div>
        )}
      </div>

      <OpportunityDetail
        opp={activeOpp}
        onClose={() => setActiveOpp(null)}
        onNavigateAccount={(companyId) => { setActiveOpp(null); onNavigate("account-detail", { companyId }); }}
        onChangeStage={(id, stage) => { moveOpp(id, stage); setActiveOpp(prev => prev ? { ...prev, stage } : null); }}
      />
      <NewOpportunityModal
        open={newOpen} onClose={() => setNewOpen(false)}
        onCreate={(o) => {
          setOpps(prev => [o, ...prev]);
          setNewOpen(false);
        }}
      />
    </>
  );
}

function NewOpportunityModal({ open, onClose, onCreate }) {
  const [name, setName] = useStatePL("");
  const [companyId, setCompanyId] = useStatePL(window.COMPANIES[0]?.id || "");
  const [value, setValue] = useStatePL("50000");
  const [stage, setStage] = useStatePL("research");
  const [closeDate, setCloseDate] = useStatePL("2026-09-30");

  React.useEffect(() => { if (open) { setName(""); setValue("50000"); setStage("research"); }}, [open]);

  const handle = () => {
    if (!name.trim()) return;
    onCreate({
      id: "opp-" + Math.random().toString(36).slice(2, 8),
      name, companyId,
      stage, value: parseFloat(value) || 0, currency: "EUR",
      probability: ({ research: 0.05, contacted: 0.15, meeting_booked: 0.30, discovery: 0.45, proposal: 0.55, negotiation: 0.70, won: 0.95 })[stage] || 0.1,
      owner: CURRENT_USER.id, primaryContactId: null, stakeholderIds: [],
      nextStep: "Plan first outreach.",
      closeDate, risk: "low", riskReasons: [],
    });
  };

  return (
    <window.Modal
      open={open} onClose={onClose}
      icon="kanban" title="New opportunity"
      subtitle="Track this deal alongside its account and stakeholders."
      footer={<>
        <Button kind="ghost" onClick={onClose}>Cancel</Button>
        <Button kind="primary" icon="plus" onClick={handle} disabled={!name.trim()}>Create opportunity</Button>
      </>}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <window.FormField label="Name" span={2}>
          <window.FormInput autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Acme · Pilot expansion" />
        </window.FormField>
        <window.FormField label="Account" span={2}>
          <window.FormSelect value={companyId} onChange={(e) => setCompanyId(e.target.value)}
            options={window.COMPANIES.map(c => ({ value: c.id, label: c.name }))} />
        </window.FormField>
        <window.FormField label="Value (EUR)">
          <window.FormInput type="number" value={value} onChange={(e) => setValue(e.target.value)} />
        </window.FormField>
        <window.FormField label="Stage">
          <window.FormSelect value={stage} onChange={(e) => setStage(e.target.value)}
            options={window.OPPORTUNITY_STAGES.map(s => ({ value: s.id, label: s.label }))} />
        </window.FormField>
        <window.FormField label="Expected close" span={2}>
          <window.FormInput type="date" value={closeDate} onChange={(e) => setCloseDate(e.target.value)} />
        </window.FormField>
      </div>
    </window.Modal>
  );
}

function OpportunityDetail({ opp, onClose, onNavigateAccount, onChangeStage }) {
  if (!opp) return null;
  const company = getCompany(opp.companyId);
  const contact = getContact(opp.primaryContactId);
  const owner   = getUser(opp.owner);
  const stages  = window.OPPORTUNITY_STAGES;
  return (
    <window.SlideOver
      open={!!opp} onClose={onClose}
      icon="kanban"
      title={opp.name}
      subtitle={company?.name}
      width={460}
      footer={<>
        <Button kind="ghost" onClick={onClose}>Close</Button>
        <Button kind="primary" icon="arrow-right" onClick={() => onNavigateAccount(opp.companyId)}>Open account</Button>
      </>}
    >
      {/* Big value */}
      <div style={{ padding: 18, display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 18, borderBottom: "1px solid var(--line)" }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.05em" }}>Deal value</div>
          <div className="mono num" style={{ fontSize: 30, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.02em" }}>
            {fmtCurrency(opp.value, opp.currency)}
          </div>
          <div className="mono num" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>
            {Math.round(opp.probability * 100)}% · weighted {fmtCurrency(Math.round(opp.value * opp.probability), opp.currency)}
          </div>
        </div>
        <ScoreRing value={opp.probability * 100} size={64} stroke={5} tone="violet" />
      </div>

      {/* Stage pipeline */}
      <div style={{ padding: 18, borderBottom: "1px solid var(--line)" }}>
        <SectionTitle>Stage</SectionTitle>
        <div style={{ display: "flex", gap: 0 }}>
          {stages.filter(s => s.id !== "lost").map((s, i, arr) => {
            const reached = stages.findIndex(x => x.id === opp.stage) >= stages.findIndex(x => x.id === s.id);
            return (
              <button key={s.id} onClick={() => onChangeStage(opp.id, s.id)} style={{
                flex: 1, padding: "8px 4px", textAlign: "center",
                background: reached
                  ? ({ violet: "var(--accent)", warm: "var(--warm)", green: "var(--green)", blue: "var(--blue)", neutral: "var(--ink-4)" })[s.tone]
                  : "var(--inset)",
                color: reached ? "#fff" : "var(--ink-4)",
                fontSize: 10.5, fontWeight: 600, letterSpacing: 0,
                clipPath: `polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%, 8px 50%)`,
                marginLeft: i === 0 ? 0 : -4,
                position: "relative", zIndex: arr.length - i,
                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                transition: "background 120ms",
              }} title={`Move to ${s.label}`}>{s.label}</button>
            );
          })}
        </div>
      </div>

      {/* Details */}
      <div style={{ padding: 18, borderBottom: "1px solid var(--line)" }}>
        <SectionTitle>Details</SectionTitle>
        <div style={{ display: "grid", rowGap: 10, fontSize: 13 }}>
          <DetailRow k="Account" v={<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <CompanyLogo company={company} size={20} />{company?.name}
          </span>} />
          <DetailRow k="Primary contact" v={contact ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Avatar name={`${contact.firstName} ${contact.lastName}`} src={contact.profilePictureUrl} size={20} />
            {contact.firstName} {contact.lastName}
          </span> : "—"} />
          <DetailRow k="Owner" v={<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Avatar name={owner?.name} size={20} />{owner?.name}
          </span>} />
          <DetailRow k="Close date" v={<span className="mono">{fmtDate(opp.closeDate)}</span>} />
          <DetailRow k="Risk" v={<Badge tone={opp.risk === "medium" ? "warm" : opp.risk === "high" ? "red" : "green"} dot>{opp.risk}</Badge>} />
        </div>
      </div>

      {/* Next step */}
      <div style={{ padding: 18, borderBottom: "1px solid var(--line)" }}>
        <SectionTitle right={<AIChip>suggested</AIChip>}>Next step</SectionTitle>
        <div style={{ padding: 12, borderRadius: 8, background: "var(--surface-2)", border: "1px solid var(--line)", fontSize: 13, color: "var(--ink)", lineHeight: 1.55 }}>
          {opp.nextStep}
        </div>
        {opp.riskReasons?.length > 0 && (
          <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 4 }}>
            {opp.riskReasons.map((r, i) => (
              <div key={i} style={{ fontSize: 11.5, color: "var(--warm-ink)", display: "flex", alignItems: "center", gap: 6 }}>
                <Icon name="alert" size={11} /> {r}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Quick actions */}
      <div style={{ padding: 18, display: "flex", flexWrap: "wrap", gap: 6 }}>
        <Button kind="accent" size="sm" icon="send">Send follow-up</Button>
        <Button kind="secondary" size="sm" icon="calendar">Book meeting</Button>
        <Button kind="secondary" size="sm" icon="check-square">Add task</Button>
        <Button kind="secondary" size="sm" icon="trash" onClick={onClose}>Archive</Button>
      </div>
    </window.SlideOver>
  );
}

function DetailRow({ k, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12, alignItems: "center", fontSize: 12.5 }}>
      <dt style={{ color: "var(--ink-3)" }}>{k}</dt>
      <dd style={{ margin: 0, color: "var(--ink)", fontWeight: 500 }}>{v}</dd>
    </div>
  );
}

function KanbanColumn({ stage, opps, onDragOver, onDrop, onOpenOpp, setDragId }) {
  const total = opps.reduce((s, o) => s + (o.value || 0), 0);
  return (
    <div
      onDragOver={onDragOver}
      onDrop={onDrop}
      style={{
        flex: "0 0 280px",
        background: "var(--bg-tint)",
        border: "1px solid var(--line)",
        borderRadius: 10,
        display: "flex", flexDirection: "column", maxHeight: "100%",
      }}
    >
      <div style={{
        padding: "10px 12px",
        display: "flex", alignItems: "center", gap: 8,
        borderBottom: "1px solid var(--line)",
      }}>
        <Badge tone={stage.tone} dot size="sm">{stage.label}</Badge>
        <span className="mono num" style={{ fontSize: 11, color: "var(--ink-3)" }}>{opps.length}</span>
        <span style={{ flex: 1 }} />
        <span className="mono num" style={{ fontSize: 11, color: "var(--ink-2)", fontWeight: 600 }}>
          {fmtCurrency(total, "EUR")}
        </span>
      </div>
      <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8, overflowY: "auto", minHeight: 80 }}>
        {opps.map(o => <OppCard key={o.id} o={o} onDragStart={() => setDragId(o.id)} onClick={() => onOpenOpp(o)} />)}
        {opps.length === 0 && (
          <div style={{
            padding: 20, textAlign: "center",
            fontSize: 11.5, color: "var(--ink-4)",
            border: "1px dashed var(--line-2)", borderRadius: 8,
          }}>
            Drop here
          </div>
        )}
      </div>
    </div>
  );
}

function OppCard({ o, onDragStart, onClick }) {
  const company = getCompany(o.companyId);
  const contact = getContact(o.primaryContactId);
  return (
    <div
      draggable
      onDragStart={onDragStart}
      onClick={onClick}
      style={{
        background: "var(--surface)",
        border: "1px solid var(--line)",
        borderRadius: 9,
        padding: 12,
        cursor: "grab",
        boxShadow: "var(--shadow-1)",
        transition: "transform 120ms, box-shadow 120ms",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "var(--shadow-2)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "var(--shadow-1)"; }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <CompanyLogo company={company} size={22} />
        <span style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{company?.name}</span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", lineHeight: 1.4, marginBottom: 8 }}>{o.name.replace(/^[^·]+·\s*/, "")}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
        <span className="mono num" style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{fmtCurrency(o.value, o.currency)}</span>
        <span style={{ fontSize: 11, color: "var(--ink-3)" }}>·</span>
        <span className="mono num" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{Math.round(o.probability * 100)}%</span>
      </div>
      <div style={{ height: 3, background: "var(--inset)", borderRadius: 3, overflow: "hidden", marginBottom: 10 }}>
        <div style={{ width: `${o.probability * 100}%`, height: "100%", background: "var(--accent)", borderRadius: 3 }} />
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0 }}>
          <Avatar name={getUser(o.owner)?.name} size={18} title={getUser(o.owner)?.name} />
          {contact && <Avatar name={`${contact.firstName} ${contact.lastName}`} src={contact.profilePictureUrl} size={18} title={`${contact.firstName} ${contact.lastName}`} />}
        </div>
        {o.closeDate && (
          <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{fmtDate(o.closeDate, { day: "2-digit", month: "short" })}</span>
        )}
      </div>
      {o.risk === "medium" && (
        <div style={{
          marginTop: 8, padding: "5px 8px",
          background: "var(--warm-soft)", borderRadius: 5,
          fontSize: 10.5, color: "var(--warm-ink)",
          display: "flex", alignItems: "center", gap: 4,
        }}>
          <Icon name="alert" size={10} />
          {o.riskReasons[0]}
        </div>
      )}
    </div>
  );
}

function PipelineTable({ opps, onOpen }) {
  return (
    <Card padding={0} style={{ overflow: "hidden" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.3fr 1fr 110px 110px 90px 110px 110px",
        padding: "10px 16px",
        background: "var(--surface-2)",
        borderBottom: "1px solid var(--line)",
        fontSize: 11, fontWeight: 600, color: "var(--ink-3)",
        textTransform: "uppercase", letterSpacing: "0.04em",
      }}>
        <div>Opportunity</div>
        <div>Account</div>
        <div>Stage</div>
        <div>Value</div>
        <div>Prob.</div>
        <div>Close</div>
        <div>Owner</div>
      </div>
      {opps.map((o, i) => {
        const company = getCompany(o.companyId);
        const owner = getUser(o.owner);
        return (
          <button key={o.id} onClick={() => onOpen(o)} style={{
            display: "grid",
            gridTemplateColumns: "1.3fr 1fr 110px 110px 90px 110px 110px",
            padding: "12px 16px",
            borderBottom: i < opps.length - 1 ? "1px solid var(--line)" : "none",
            textAlign: "left", alignItems: "center", width: "100%",
          }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{o.name}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <CompanyLogo company={company} size={20} />
              <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{company?.name}</span>
            </div>
            <div><Badge tone={window.OPPORTUNITY_STAGES.find(s => s.id === o.stage)?.tone}>{o.stage.replace(/_/g, " ")}</Badge></div>
            <div className="mono num" style={{ fontSize: 13, fontWeight: 600 }}>{fmtCurrency(o.value, o.currency)}</div>
            <div className="mono num" style={{ fontSize: 12 }}>{Math.round(o.probability * 100)}%</div>
            <div className="mono" style={{ fontSize: 12 }}>{fmtDate(o.closeDate, { day: "2-digit", month: "short" })}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Avatar name={owner?.name} size={20} />
              <span style={{ fontSize: 12 }}>{owner?.name}</span>
            </div>
          </button>
        );
      })}
    </Card>
  );
}

window.PagePipeline = PagePipeline;