/* Dashboard — next actions, follow-ups due, recent properties, new-lead alerts.
   window.DashboardScreen */
const { useState } = React;

function StatCard({ icon, label, value, tone, sub }) {
  const c = { ember: ["var(--ember-50)", "var(--ember-600)"], harbor: ["var(--harbor-50)", "var(--harbor-600)"], green: ["var(--success-soft)", "var(--success-text)"], blue: ["var(--info-soft)", "var(--info-text)"] }[tone] || ["var(--slate-100)", "var(--slate-600)"];
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: 16, boxShadow: "var(--shadow-xs)", display: "flex", gap: 13, alignItems: "center" }}>
      <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: c[0], color: c[1], display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={icon} size={22} /></span>
      <div>
        <div style={{ fontSize: "var(--text-2xl)", fontWeight: 800, color: "var(--text-strong)", lineHeight: 1 }} className="tnum">{value}</div>
        <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", marginTop: 3 }}>{label}{sub && <span style={{ color: "var(--text-action)", fontWeight: 600 }}> · {sub}</span>}</div>
      </div>
    </div>
  );
}

function Panel({ title, icon, action, children, pad = 16 }) {
  return (
    <section style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "13px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
        {icon && <Icon name={icon} size={17} color="var(--text-brand)" />}
        <h3 style={{ fontSize: "var(--text-md)", fontWeight: 700, color: "var(--text-strong)" }}>{title}</h3>
        <div style={{ marginLeft: "auto" }}>{action}</div>
      </div>
      <div style={{ padding: pad }}>{children}</div>
    </section>
  );
}

function DashboardScreen({ onOpen }) {
  const d = window.PT_DATA;
  const dueToday = d.properties.filter((p) => p.overdue);
  return (
    <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: 14 }}>
        <StatCard icon="calendar-clock" label="Follow-ups due today" value="4" tone="ember" sub="2 overdue" />
        <StatCard icon="building-2" label="Active deals" value="3" tone="harbor" />
        <StatCard icon="inbox" label="New leads this week" value="3" tone="blue" />
        <StatCard icon="circle-check" label="Closed this month" value="1" tone="green" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: 18, alignItems: "start" }} className="pt-detail-grid">
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Panel title="Next actions — follow-ups due" icon="calendar-clock" pad={0}
            action={<Badge tone="action" dot>{dueToday.length} due</Badge>}>
            {dueToday.concat(d.properties.filter(p => p.followDate === "Jun 21")).map((p, i) => (
              <button key={p.id} onClick={() => onOpen(p)} style={{ display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left", padding: "12px 16px", borderBottom: "1px solid var(--border-subtle)", background: "transparent", border: "none", borderTop: "none", borderLeft: "none", borderRight: "none", cursor: "pointer" }}>
                <img src={p.thumb} alt="" style={{ width: 44, height: 34, borderRadius: "var(--radius-sm)", objectFit: "cover", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: "var(--text-base)" }}>{p.address}</div>
                  <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{p.notes[0]?.subject || "Review this deal"}</div>
                </div>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: "var(--text-sm)", fontWeight: 600, color: p.overdue ? "var(--ember-600)" : "var(--text-body)" }}>
                  <Icon name="calendar-clock" size={14} color={p.overdue ? "var(--ember-500)" : "var(--text-muted)"} />{p.followDate}
                </span>
              </button>
            ))}
          </Panel>

          <Panel title="Recent properties" icon="building-2" pad={0}>
            {d.properties.slice(0, 4).map((p) => (
              <button key={p.id} onClick={() => onOpen(p)} style={{ display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left", padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", background: "transparent", border: "none", cursor: "pointer" }}>
                <img src={p.thumb} alt="" style={{ width: 44, height: 34, borderRadius: "var(--radius-sm)", objectFit: "cover", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: "var(--text-base)" }}>{p.address}</div>
                  <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }} className="tnum">{p.county} County · ${p.ask.toLocaleString()}</div>
                </div>
                <StatusBadge status={p.status} size="sm" />
              </button>
            ))}
          </Panel>
        </div>

        <Panel title="New lead alerts" icon="bell" pad={0}
          action={<Badge tone="info">{d.leads.length} new</Badge>}>
          {d.leads.map((l, i) => (
            <button key={i} onClick={() => navigate("/dashboard/lead/" + i)} style={{ display: "flex", gap: 11, width: "100%", textAlign: "left", padding: "13px 16px", borderBottom: "1px solid var(--border-subtle)", background: "transparent", border: "none", cursor: "pointer" }}>
              <Avatar name={l.name} size="md" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: "var(--text-base)" }}>{l.name}</div>
                <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{l.address !== "—" ? l.address : "No property"}</div>
                <div style={{ marginTop: 5, display: "flex", alignItems: "center", gap: 6 }}>
                  <Badge tone="brand" size="sm" icon="clipboard-list">{l.source}</Badge>
                  <span style={{ fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{l.time}</span>
                </div>
              </div>
              <Icon name="chevron-right" size={18} color="var(--text-subtle)" style={{ alignSelf: "center" }} />
            </button>
          ))}
          <div style={{ padding: 14 }}>
            <Button variant="secondary" size="sm" fullWidth icon="mail">View owner notifications</Button>
          </div>
        </Panel>
      </div>
    </div>
  );
}
window.DashboardScreen = DashboardScreen;