// Leads list (table) + lead detail card + new-lead modal.

function NewLeadModal({ open, onClose }) {
  const toast = useToast();
  return (
    <Modal open={open} onClose={onClose} title="Add lead"
      foot={<>
        <button className="rc-btn" onClick={onClose}>Cancel</button>
        <button className="rc-btn-primary" onClick={() => { onClose(); toast({ tone: "ok", title: "Lead added", body: "Assigned to you" }); }}><Icon name="check" size={14} />Save lead</button>
      </>}>
      <div className="rc-field-2">
        <label className="rc-field"><span>First name</span><input placeholder="Ana" /></label>
        <label className="rc-field"><span>Last name</span><input placeholder="Ferreira" /></label>
      </div>
      <label className="rc-field"><span>Email</span><input placeholder="name@email.com" /></label>
      <div className="rc-field-2">
        <label className="rc-field"><span>Phone</span><input placeholder="+351 …" /></label>
        <label className="rc-field"><span>Source</span>
          <select defaultValue="Idealista"><option>Idealista</option><option>Website</option><option>Referral</option><option>Walk-in</option><option>Portal</option></select>
        </label>
      </div>
      <div className="rc-field-2">
        <label className="rc-field"><span>Interested development</span>
          <select>{DEVELOPMENTS.map((d) => <option key={d.id}>{d.name}</option>)}</select>
        </label>
        <label className="rc-field"><span>Max budget (€)</span><input placeholder="350000" inputMode="numeric" /></label>
      </div>
    </Modal>
  );
}

function Leads({ openLead, role }) {
  const toast = useToast();
  const me = RoleProfile(role);
  const isManager = role === "manager" || role === "admin";
  const [newOpen, setNewOpen] = React.useState(false);

  const columns = [
    { key: "name", label: "Lead", sortable: true, render: (l) => (
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <Avatar initials={l.name.split(" ").map((x) => x[0]).join("")} size={30} color="var(--brand-soft)" />
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>{l.name}</div>
          <div style={{ fontSize: 11, color: "var(--text-faint)" }}>{l.email}</div>
        </div>
      </div>
    ) },
    { key: "status", label: "Stage", sortable: true, render: (l) => <Pill tone={l.status} size="sm" dot>{l.status}</Pill> },
    { key: "dev", label: "Development", sortable: true, render: (l) => <span>{devName(l.dev)}</span> },
    { key: "unit", label: "Unit", render: (l) => l.unit ? <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{l.unit}</span> : <span style={{ color: "var(--text-faint)" }}>—</span> },
    { key: "source", label: "Source", sortable: true, render: (l) => <span style={{ color: "var(--text-muted)", fontSize: 12.5 }}>{l.source}</span> },
    ...(isManager ? [{ key: "owner", label: "Agent", sortable: true, render: (l) => {
      const a = agentById(l.owner);
      return <div style={{ display: "flex", alignItems: "center", gap: 7 }}><Avatar initials={a.initials} size={22} color={a.color} /><span style={{ fontSize: 12.5 }}>{a.name.split(" ")[0]}</span></div>;
    } }] : []),
    { key: "score", label: "Score", sortable: true, render: (l) => (
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 90 }}>
        <div className="rc-progress-bar" style={{ maxWidth: 50 }}><div style={{ width: `${l.score}%`, background: l.score >= 75 ? "#1f8a52" : l.score >= 50 ? "#f59e0b" : "#cbd5e1" }} /></div>
        <span style={{ fontSize: 12, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{l.score}</span>
      </div>
    ) },
    { key: "value", label: "Value", sortable: true, align: "right", render: (l) => <span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{moneyK(l.value)}</span> },
    { key: "lastTouch", label: "Last touch", render: (l) => <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{l.lastTouch}</span> },
  ];

  const base = isManager ? LEADS : LEADS.filter((l) => l.owner === me.id);
  const views = [
    { id: "all", label: isManager ? "All leads" : "My leads", count: base.length, predicate: null },
    { id: "new", label: "New", count: base.filter((l) => l.status === "New").length, predicate: (l) => l.status === "New" },
    { id: "active", label: "Active", count: base.filter((l) => ["Qualified", "Viewing", "Offer"].includes(l.status)).length, predicate: (l) => ["Qualified", "Viewing", "Offer"].includes(l.status) },
    { id: "reserved", label: "Reserved", count: base.filter((l) => l.status === "Reservation").length, predicate: (l) => l.status === "Reservation" },
    { id: "hot", label: "Hot (75+)", count: base.filter((l) => l.score >= 75).length, predicate: (l) => l.score >= 75 },
  ];

  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div>
          <h1 className="rc-h1">Leads</h1>
          <div className="rc-sub">{base.length} {isManager ? "across the floor" : "assigned to you"} · {base.filter((l) => l.status === "New").length} new this week</div>
        </div>
        <div className="rc-head-cta">
          <button className="rc-btn"><Icon name="upload" size={14} />Import</button>
          <button className="rc-btn-primary" onClick={() => setNewOpen(true)}><Icon name="plus" size={14} />New lead</button>
        </div>
      </div>

      <RCDataTable
        data={base}
        columns={columns}
        views={views}
        searchKeys={["name", "email", "phone"]}
        onRowClick={(l) => openLead(l.id)}
        bulkActions={[
          { label: "Assign", icon: "user", onClick: (ids) => toast({ tone: "ok", title: `Assigned ${ids.length} leads` }) },
          { label: "Email", icon: "mail", onClick: (ids) => toast({ tone: "ok", title: `Emailed ${ids.length} leads` }) },
          { label: "Export", icon: "download", onClick: (ids) => toast({ title: `Exported ${ids.length} rows` }) },
        ]}
        empty={{ title: "No leads yet", body: "Import from a portal or add your first lead manually." }}
      />
      <NewLeadModal open={newOpen} onClose={() => setNewOpen(false)} />
    </div>
  );
}

/* ---------- LEAD DETAIL ---------- */
function LeadDetail({ leadId, setScreen, goInventory }) {
  const toast = useToast();
  const base = leadById(leadId) || LEADS[0];
  const c = { ...ACTIVE_LEAD, ...base, notes: ACTIVE_LEAD.notes, activity: ACTIVE_LEAD.activity };
  const agent = agentById(c.owner);
  const unit = c.unit ? unitByCode(c.unit) : null;
  const STAGES = ["New", "Qualified", "Viewing", "Offer", "Reservation", "Closed"];
  const stageIdx = STAGES.indexOf(c.status);

  return (
    <div className="rc-page">
      <div className="rc-crumbs">
        <button onClick={() => setScreen("leads")} className="rc-crumb-link">Leads</button>
        <Icon name="chevronRight" size={12} />
        <span>{c.name}</span>
      </div>

      <div className="rc-clienthead">
        <Avatar initials={c.name.split(" ").map((x) => x[0]).join("")} size={56} color="var(--brand)" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <h1 className="rc-h1" style={{ marginBottom: 0 }}>{c.name}</h1>
            <Pill tone={c.status} dot>{c.status}</Pill>
            <span style={{ fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap" }}>Score {c.score}</span>
          </div>
          <div className="rc-client-meta">
            <span>{c.email}</span><span>·</span><span>{c.phone}</span><span>·</span>
            <span>{c.source}</span><span>·</span><span>Agent: {agent.name}</span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="rc-btn" onClick={() => toast({ title: "Calling " + c.name })}><Icon name="phone" size={14} />Call</button>
          <button className="rc-btn" onClick={() => toast({ title: "Email composer (demo)" })}><Icon name="mail" size={14} />Email</button>
          <button className="rc-btn-primary" onClick={() => toast({ tone: "ok", title: "Viewing booked (demo)" })}><Icon name="calendar" size={14} />Book viewing</button>
        </div>
      </div>

      {/* stage tracker */}
      <div className="rc-card" style={{ padding: "14px 18px" }}>
        <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
          {STAGES.map((s, i) => (
            <React.Fragment key={s}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, flex: 1 }}>
                <div style={{ width: "100%", height: 5, borderRadius: 999, background: i <= stageIdx ? STAGE_COLOR[c.status] : "var(--surface-2)" }} />
                <span style={{ fontSize: 11, fontWeight: i === stageIdx ? 700 : 500, color: i <= stageIdx ? "var(--text)" : "var(--text-faint)" }}>{s}</span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="rc-client-grid">
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
          {/* matched unit */}
          <div className="rc-card">
            <div className="rc-card-head">
              <div className="rc-card-title">Interested in</div>
              {unit && <button className="rc-link" onClick={goInventory}>Inventory →</button>}
            </div>
            {unit ? (
              <div className="rc-unitchip" onClick={goInventory}>
                <div className="rc-unit-thumb"><Icon name="building" size={20} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <strong style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13 }}>{unit.code}</strong>
                    <Pill tone={unit.status} size="sm">{unit.status}</Pill>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 3 }}>{devName(unit.dev)} · {unit.type} · {unit.size} m² · {unit.view} view</div>
                </div>
                <strong style={{ fontVariantNumeric: "tabular-nums", fontSize: 15 }}>{money(unit.price)}</strong>
              </div>
            ) : (
              <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "4px 2px" }}>
                <div style={{ fontSize: 13, color: "var(--text-muted)", flex: 1 }}>No unit matched yet · looking at <strong style={{ color: "var(--text)" }}>{devName(c.dev)}</strong>, budget {moneyK(c.budget)}.</div>
                <button className="rc-btn rc-btn-sm" onClick={goInventory}><Icon name="building" size={13} />Match a unit</button>
              </div>
            )}
          </div>

          <div className="rc-card">
            <div className="rc-card-title">Notes</div>
            <div className="rc-notes">
              {c.notes.map((n, i) => (
                <div key={i} className="rc-note">
                  <div className="rc-note-head"><strong>{n.author}</strong><span>{n.time}</span></div>
                  <div className="rc-note-body">{n.text}</div>
                </div>
              ))}
            </div>
            <textarea className="rc-noteinput" placeholder="Add a note about this lead…" />
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
          <div className="rc-card">
            <div className="rc-card-title">Buyer profile</div>
            <div className="rc-kv">
              <div><span>Max budget</span><strong>{money(c.budget)}</strong></div>
              <div><span>Deal value</span><strong>{money(c.value)}</strong></div>
              <div><span>Development</span><strong>{devName(c.dev)}</strong></div>
              <div><span>Created</span><strong>{c.created}</strong></div>
            </div>
          </div>

          <div className="rc-card">
            <div className="rc-card-title">Activity</div>
            <div className="rc-activity">
              {c.activity.map((a, i) => (
                <div key={i} className="rc-act-row">
                  <div className="rc-act-dot" style={{ background: { view: "#f59e0b", call: "#0ea5e9", mail: "#8b5cf6", lead: "var(--text-faint)" }[a.kind] }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13 }}>{a.text}</div>
                    <div style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Leads, LeadDetail, NewLeadModal });