// Remaining screens: Tasks, Reservations & payments, Insights, Team, Settings.

/* ---------- TASKS ---------- */
function Tasks({ openLead, role }) {
  const me = RoleProfile(role);
  const isManager = role === "manager" || role === "admin";
  const base = isManager ? TASKS : TASKS.filter((t) => t.owner === me.id);
  const [done, setDone] = React.useState(() => new Set(base.filter((t) => t.done).map((t) => t.id)));
  const [filter, setFilter] = React.useState("open");
  const toast = useToast();

  const toggle = (id, title) => setDone((s) => {
    const n = new Set(s);
    if (n.has(id)) n.delete(id); else { n.add(id); toast({ tone: "ok", title: "Task completed", body: title }); }
    return n;
  });

  const rows = base.filter((t) => filter === "open" ? !done.has(t.id) : filter === "done" ? done.has(t.id) : true);
  const groups = { "Today": [], "Tomorrow": [], "Later": [] };
  rows.forEach((t) => {
    const k = t.time.includes("Today") ? "Today" : t.time.includes("Tomorrow") ? "Tomorrow" : "Later";
    groups[k].push(t);
  });

  const typeIcon = { call: "phone", mail: "mail", handshake: "handshake", doc: "doc", calendar: "calendar", payments: "payments" };

  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div>
          <h1 className="rc-h1">Tasks</h1>
          <div className="rc-sub">{base.filter((t) => !done.has(t.id)).length} open · {base.filter((t) => t.priority === "high" && !done.has(t.id)).length} high priority</div>
        </div>
        <div className="rc-segmented">
          {["open", "done", "all"].map((f) => <button key={f} className={`rc-segbtn ${filter === f ? "is-active" : ""}`} onClick={() => setFilter(f)} style={{ textTransform: "capitalize" }}>{f}</button>)}
        </div>
      </div>

      {Object.entries(groups).map(([label, ts]) => ts.length > 0 && (
        <div key={label} className="rc-card">
          <div className="rc-card-title" style={{ fontSize: 13.5 }}>{label} · {ts.length}</div>
          <div className="rc-list">
            {ts.map((t) => {
              const lead = leadById(t.lead);
              const a = agentById(t.owner);
              const isDone = done.has(t.id);
              return (
                <div key={t.id} className="rc-listrow" style={{ cursor: "default", opacity: isDone ? 0.55 : 1 }}>
                  <button className={`rc-check ${t.priority === "high" && !isDone ? "is-high" : ""} ${isDone ? "is-done" : ""}`} onClick={() => toggle(t.id, t.title)}>
                    {isDone && <Icon name="check" size={11} />}
                  </button>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--brand-softer)", color: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={typeIcon[t.type] || "note"} size={15} />
                  </div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="rc-listrow-name" style={{ textDecoration: isDone ? "line-through" : "none" }}>{t.title}</div>
                    <div className="rc-listrow-meta">{t.time}{t.priority === "high" && !isDone && <span style={{ color: "#d9544a" }}> · high</span>}</div>
                  </div>
                  {isManager && <Avatar initials={a.initials} size={22} color={a.color} />}
                  {lead && <button className="rc-btn rc-btn-sm" onClick={() => openLead(lead.id)}>Open lead</button>}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- RESERVATIONS & PAYMENTS ---------- */
function Reservations({ openLead, role }) {
  const toast = useToast();
  const me = RoleProfile(role);
  const isManager = role === "manager" || role === "admin";
  const base = isManager ? PAYMENTS : PAYMENTS.filter((p) => p.agent === me.id);

  const paid = base.filter((p) => p.status === "Paid").reduce((s, p) => s + p.amount, 0);
  const pending = base.filter((p) => p.status === "Pending").reduce((s, p) => s + p.amount, 0);
  const overdue = base.filter((p) => p.status === "Overdue");

  const columns = [
    { key: "id", label: "Ref", sortable: true, render: (p) => <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{p.id}</span> },
    { key: "lead", label: "Buyer", render: (p) => { const l = leadById(p.lead); return <span style={{ fontSize: 13 }}>{l ? l.name : "—"}</span>; } },
    { key: "unit", label: "Unit", render: (p) => <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>{p.unit}</span> },
    { key: "kind", label: "Type", sortable: true, render: (p) => <span style={{ fontSize: 12.5 }}>{p.kind}</span> },
    { key: "method", label: "Method", render: (p) => <span style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{p.method}</span> },
    { key: "status", label: "Status", sortable: true, render: (p) => <Pill tone={p.status} size="sm" dot>{p.status}</Pill> },
    { key: "due", label: "Due", sortable: true, render: (p) => <span style={{ fontSize: 12.5, color: p.status === "Overdue" ? "#cf4436" : "var(--text-muted)" }}>{p.due}</span> },
    { key: "amount", label: "Amount", sortable: true, align: "right", render: (p) => <span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{money(p.amount)}</span> },
  ];

  const views = [
    { id: "all", label: "All", count: base.length, predicate: null },
    { id: "pending", label: "Pending", count: base.filter((p) => p.status === "Pending").length, predicate: (p) => p.status === "Pending" },
    { id: "overdue", label: "Overdue", count: overdue.length, predicate: (p) => p.status === "Overdue" },
    { id: "paid", label: "Paid", count: base.filter((p) => p.status === "Paid").length, predicate: (p) => p.status === "Paid" },
  ];

  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div>
          <h1 className="rc-h1">Reservations & payments</h1>
          <div className="rc-sub">Reservation fees, deposits & completion milestones</div>
        </div>
        <button className="rc-btn-primary" onClick={() => toast({ title: "Record payment (demo)" })}><Icon name="plus" size={14} />Record payment</button>
      </div>

      <div className="rc-stats" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <StatCard label="Collected (MTD)" value={moneyK(paid)} sub={`${base.filter((p) => p.status === "Paid").length} payments`} />
        <StatCard label="Pending" value={moneyK(pending)} sub={`${base.filter((p) => p.status === "Pending").length} awaiting`} />
        <StatCard label="Overdue" value={moneyK(overdue.reduce((s, p) => s + p.amount, 0))} sub={`${overdue.length} need chasing`} />
        <StatCard label="Reservations (MTD)" value={METRICS.reservationsMonth} sub={moneyK(METRICS.reservationsValue)} />
      </div>

      {overdue.length > 0 && (
        <div className="rc-card" style={{ borderColor: "rgba(217,84,74,0.35)", background: "rgba(217,84,74,0.05)", flexDirection: "row", alignItems: "center", gap: 12 }}>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: "rgba(217,84,74,0.15)", color: "#cf4436", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="clock" size={17} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{overdue.length} overdue payment{overdue.length > 1 ? "s" : ""} · {money(overdue.reduce((s, p) => s + p.amount, 0))}</div>
            <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{overdue.map((p) => { const l = leadById(p.lead); return l ? l.name : ""; }).join(", ")} — past due date.</div>
          </div>
          <button className="rc-btn rc-btn-sm" onClick={() => toast({ tone: "ok", title: "Reminders sent" })}><Icon name="mail" size={13} />Send reminders</button>
        </div>
      )}

      <RCDataTable
        data={base}
        columns={columns}
        views={views}
        searchKeys={["id", "unit", "kind"]}
        onRowClick={(p) => { const l = leadById(p.lead); if (l) openLead(l.id); }}
        bulkActions={[
          { label: "Mark paid", icon: "check", onClick: (ids) => toast({ tone: "ok", title: `Marked ${ids.length} as paid` }) },
          { label: "Export", icon: "download", onClick: (ids) => toast({ title: `Exported ${ids.length} rows` }) },
        ]}
        empty={{ title: "No payments yet", body: "Reservation fees and deposits will appear here." }}
      />
    </div>
  );
}

/* ---------- INSIGHTS (manager) ---------- */
function Insights() {
  const m = METRICS;
  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div><h1 className="rc-h1">Insights</h1><div className="rc-sub">Sales performance across all developments</div></div>
        <button className="rc-btn"><Icon name="download" size={14} />Export report</button>
      </div>
      <div className="rc-stats">
        <StatCard label="New leads this week" value={m.newLeadsWeek} delta={m.newLeadsDelta} positive spark={m.leadSpark} />
        <StatCard label="Lead → viewing" value="52%" sub="14 of 27" />
        <StatCard label="Viewing → reservation" value="36%" sub="4 of 11" />
        <StatCard label="Avg deal value" value={moneyK(m.reservationsValue / m.reservationsMonth)} sub="per reservation" />
      </div>
      <div className="rc-row-2">
        <div className="rc-card">
          <div className="rc-card-title">Conversion funnel</div>
          <FunnelChart stages={Object.entries(m.funnel).map(([label, value]) => ({ label, value }))} />
        </div>
        <div className="rc-card">
          <div className="rc-card-title">New leads · last 7 days</div>
          <div style={{ marginTop: 8 }}><BarMini data={m.leadSpark} w={300} h={140} /></div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-faint)" }}>
            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
          </div>
        </div>
      </div>
      <div className="rc-card">
        <div className="rc-card-title">Sales by development</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {DEVELOPMENTS.map((d) => {
            const pct = Math.round((d.sold / d.total) * 100);
            return (
              <div key={d.id} style={{ display: "grid", gridTemplateColumns: "160px 1fr 120px", alignItems: "center", gap: 14, padding: "8px 0", borderBottom: "1px solid var(--border)" }}>
                <div><div style={{ fontSize: 13, fontWeight: 600 }}>{d.name}</div><div style={{ fontSize: 11, color: "var(--text-muted)" }}>{d.city}</div></div>
                <div className="rc-progress-bar" style={{ height: 8 }}><div style={{ width: `${pct}%` }} /></div>
                <div style={{ textAlign: "right", fontSize: 12.5 }}><strong>{d.sold}/{d.total}</strong> sold · {pct}%</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ---------- TEAM (manager) ---------- */
function Team() {
  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div><h1 className="rc-h1">Team</h1><div className="rc-sub">3 sales agents · June performance</div></div>
        <button className="rc-btn-primary"><Icon name="plus" size={14} />Invite agent</button>
      </div>
      <div className="rc-row-3">
        {LEADERBOARD.map((row, i) => {
          const a = agentById(row.agent);
          const leadCount = LEADS.filter((l) => l.owner === a.id).length;
          return (
            <div key={a.id} className="rc-card">
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Avatar initials={a.initials} size={44} color={a.color} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>{a.name}</div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{a.role}</div>
                </div>
                {i === 0 && <Pill tone="Closed" size="sm"><Icon name="star" size={11} /> Top</Pill>}
              </div>
              <div className="rc-kv" style={{ marginTop: 4 }}>
                <div><span>Active leads</span><strong>{leadCount}</strong></div>
                <div><span>Viewings</span><strong>{row.viewings}</strong></div>
                <div><span>Reservations</span><strong>{row.reservations}</strong></div>
                <div><span>Value</span><strong>{moneyK(row.value)}</strong></div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- SETTINGS (admin) ---------- */
function Settings() {
  return (
    <div className="rc-page">
      <div className="rc-pagehead"><div><h1 className="rc-h1">Settings</h1><div className="rc-sub">Workspace, developments & team</div></div></div>
      <div className="rc-row-2">
        <div className="rc-card">
          <div className="rc-card-title">Developments</div>
          <div className="rc-list">
            {DEVELOPMENTS.map((d) => (
              <div key={d.id} className="rc-listrow" style={{ cursor: "default" }}>
                <div className="rc-unit-thumb" style={{ width: 38, height: 38 }}><Icon name="building" size={16} /></div>
                <div style={{ flex: 1 }}><div className="rc-listrow-name">{d.name}</div><div className="rc-listrow-meta">{d.city} · {d.total} units</div></div>
                <Pill tone="Available" size="sm">Live</Pill>
              </div>
            ))}
          </div>
          <button className="rc-btn rc-btn-sm" style={{ alignSelf: "flex-start" }}><Icon name="plus" size={13} />Add development</button>
        </div>
        <div className="rc-card">
          <div className="rc-card-title">Lead sources</div>
          <div className="rc-list">
            {[["Idealista", true], ["Website form", true], ["Referral program", true], ["Imovirtual", false]].map(([name, on]) => (
              <div key={name} className="rc-listrow" style={{ cursor: "default" }}>
                <div style={{ flex: 1 }}><div className="rc-listrow-name">{name}</div></div>
                <Pill tone={on ? "Available" : "neutral"} size="sm" dot>{on ? "Connected" : "Off"}</Pill>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="rc-card">
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div className="rc-copilot-mark"><Icon name="sparkles" size={15} /></div>
          <strong style={{ fontSize: 14 }}>Upgrade to Meridian Full</strong>
        </div>
        <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5 }}>Lite covers leads, inventory and reservations. Full adds e-signatures, payment plans, buyer portal, and automated campaigns.</div>
        <button className="rc-btn-primary rc-btn-sm" style={{ alignSelf: "flex-start" }}>See what you'd unlock →</button>
      </div>
    </div>
  );
}

Object.assign(window, { Tasks, Reservations, Insights, Team, Settings });