/* global React, Icon, Chip, Button, KPI, Avatar, api */

function RingWatermark({ size = 200, top, right, bottom, left, opacity = 0.06 }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} fill="none"
         style={{ position: "absolute", top, right, bottom, left, opacity, pointerEvents: "none", color: "var(--brand-burgundy)" }}>
      <circle cx="100" cy="100" r="92" stroke="currentColor" strokeWidth="6" />
      <circle cx="100" cy="100" r="64" stroke="currentColor" strokeWidth="6" />
      <circle cx="100" cy="100" r="36" stroke="currentColor" strokeWidth="6" />
    </svg>
  );
}

function timeAgo(dateStr) {
  const diff = Date.now() - new Date(dateStr);
  const mins = Math.floor(diff / 60000);
  if (mins < 1)  return "just now";
  if (mins < 60) return mins + "m";
  const hrs = Math.floor(mins / 60);
  if (hrs < 24)  return hrs + "h";
  return Math.floor(hrs / 24) + "d";
}

function fmtAED(n) {
  if (!n) return "AED 0";
  if (n >= 1000000) return "AED " + (n / 1000000).toFixed(1) + "M";
  if (n >= 1000)    return "AED " + Math.round(n / 1000) + "K";
  return "AED " + n.toLocaleString("en-AE");
}

const SRC_LABEL = { whatsapp: "WhatsApp", facebook: "Facebook", website: "Website", referral: "Referral", "walk-in": "Walk-in", other: "Other" };

function DashboardPage({ onOpenLead, onOpenEngagement, onNewEng, user }) {
  const [stats,        setStats]        = React.useState(null);
  const [leads,        setLeads]        = React.useState([]);
  const [renewals,     setRenewals]     = React.useState([]);
  const [renewalStats, setRenewalStats] = React.useState({ critical: 0, warning: 0, upcoming: 0, total: 0 });
  const [loading,      setLoading]      = React.useState(true);

  React.useEffect(() => {
    Promise.all([
      api.get("/dashboard/stats"),
      api.get("/leads?status=new"),
      api.get("/renewals"),
    ]).then(([statsRes, leadsRes, renewalsRes]) => {
      const d = statsRes.data || {};
      setStats(d);
      setLeads((leadsRes.data || []).slice(0, 5));
      setRenewals((renewalsRes.data || []).slice(0, 5).map(api.map.renewal));
      setRenewalStats(renewalsRes.stats || { critical: 0, warning: 0, upcoming: 0, total: 0 });
    }).catch(() => {}).finally(() => setLoading(false));
  }, []);

  /* header */
  const now       = new Date();
  const hour      = now.getHours();
  const greeting  = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
  const firstName = user ? (user.name || "").split(" ")[0] : "";
  const dayLabel  = now.toLocaleDateString("en-AE", { weekday: "long", day: "numeric", month: "long", year: "numeric" });

  /* KPI values */
  const isSuperAdmin  = stats ? stats.isSuperAdmin : null;
  const scopeLabel    = isSuperAdmin === false ? "assigned to you" : "across all services";
  const activeEngs    = stats ? stats.activeEngagements : "—";
  const revMTD        = stats ? fmtAED(stats.revenueMTD) : "—";
  const renewals30    = stats ? (renewalStats.critical + renewalStats.warning + renewalStats.upcoming) : "—";
  const criticalCount = renewalStats.critical || 0;
  const avgRes        = stats && stats.avgResolutionDays != null ? stats.avgResolutionDays + " days" : "—";
  const newLeadsWk    = stats ? stats.newLeadsThisWeek : "—";

  const subtitle = stats
    ? `${renewalStats.critical + renewalStats.warning} renewal${(renewalStats.critical + renewalStats.warning) !== 1 ? "s" : ""} need attention · ${newLeadsWk} new lead${newLeadsWk !== 1 ? "s" : ""} this week`
    : "Loading your workspace…";

  return (
    <div className="page" style={{ position: "relative" }}>
      <RingWatermark size={320} top={-40} right={-60} />

      <div className="page-head">
        <div>
          <div className="eyebrow">{dayLabel}</div>
          <h1 className="page-title">{greeting}{firstName ? ", " + firstName : ""}</h1>
          <div className="page-sub">{subtitle}</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" icon="download">Export</Button>
          <Button icon="plus" onClick={onNewEng}>New engagement</Button>
        </div>
      </div>

      {/* KPI row */}
      <div className="resp-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 22 }}>
        <KPI label="Active engagements" value={loading ? "…" : String(activeEngs)} delta={stats ? scopeLabel : ""} />
        <KPI label="Revenue MTD" value={loading ? "…" : revMTD} delta={stats ? "paid this month · " + scopeLabel : ""} />
        <KPI label="Renewals in 30 days" value={loading ? "…" : String(renewals30)}
          delta={criticalCount > 0 ? criticalCount + " critical" : "none critical"}
          deltaDir={criticalCount > 0 ? "down" : "up"} />
        <KPI label="Avg. resolution" value={loading ? "…" : avgRes} delta={stats ? "completed engagements" : ""} />
      </div>

      {/* Two-column main */}
      <div className="resp-two-col" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 22 }}>

        {/* Renewal radar */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">Renewal radar</h3>
            <span style={{ fontSize: 12.5, color: "var(--fg-3)" }}>
              {criticalCount > 0 && <span style={{ color: "var(--danger-700)", fontWeight: 600 }}>{criticalCount} critical · </span>}
              {renewalStats.total} tracked
            </span>
          </div>
          <table className="tbl">
            <thead>
              <tr><th>Customer</th><th>Document</th><th>ID</th><th style={{ textAlign: "right" }}>Expires</th><th></th></tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan="5" style={{ textAlign: "center", padding: "28px 0", color: "var(--fg-3)", fontSize: 13 }}>Loading…</td></tr>
              ) : renewals.length === 0 ? (
                <tr><td colSpan="5" style={{ textAlign: "center", padding: "28px 0", color: "var(--fg-3)", fontSize: 13 }}>No upcoming renewals.</td></tr>
              ) : renewals.map((r, i) => (
                <tr key={r.id || i} style={{ cursor: "pointer" }}
                  onClick={() => onOpenEngagement && onOpenEngagement({
                    _id: r.id, id: r.id,
                    service: r.type, serviceIcon: "calendar-clock",
                    customer: r.name, started: "—", due: r.expires,
                    stage: 1, totalStages: 1,
                  })}>
                  <td><div className="av-row"><Avatar name={r.name} /><div className="nm">{r.name}</div></div></td>
                  <td className="cell-muted">{r.type}</td>
                  <td className="cell-mono cell-muted">{r.idNumber}</td>
                  <td style={{ textAlign: "right" }}>
                    <Chip kind={r.urgency}>{r.daysRemaining <= 0 ? "Overdue" : r.daysRemaining + " days"}</Chip>
                  </td>
                  <td style={{ textAlign: "right", width: 1 }}>
                    <button className="icon-btn"><Icon name="chevron-right" size={16} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* New leads */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">New leads</h3>
            <span style={{ fontSize: 12.5, color: "var(--fg-3)" }}>{newLeadsWk} this week</span>
          </div>
          <div style={{ padding: "4px 0" }}>
            {loading ? (
              <div style={{ padding: "28px 20px", textAlign: "center", color: "var(--fg-3)", fontSize: 13 }}>Loading…</div>
            ) : leads.length === 0 ? (
              <div style={{ padding: "28px 20px", textAlign: "center", color: "var(--fg-3)", fontSize: 13 }}>No new leads.</div>
            ) : leads.map((l, i) => (
              <div key={l._id || i}
                onClick={() => onOpenLead && onOpenLead(api.map.lead(l))}
                style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: i < leads.length - 1 ? "1px solid var(--border-subtle)" : 0, cursor: "pointer" }}>
                <Avatar name={l.name} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 500, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{l.name}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)" }}>
                    via {SRC_LABEL[l.source] || l.source || "—"} · {l.service || "—"}
                  </div>
                </div>
                <div style={{ fontSize: 11.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)", flexShrink: 0 }}>{timeAgo(l.createdAt)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Service catalogue */}
      <div className="card" style={{ position: "relative", overflow: "hidden" }}>
        <div className="card-head">
          <h3 className="card-title">Service catalogue · open work</h3>
          {!loading && stats && (
            <span style={{ fontSize: 12, color: "var(--fg-3)" }}>{activeEngs} active · {scopeLabel}</span>
          )}
        </div>
        {loading ? (
          <div style={{ padding: "28px 20px", textAlign: "center", color: "var(--fg-3)", fontSize: 13 }}>Loading…</div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {(stats && stats.serviceCounts || []).map((s, i, arr) => (
              <div key={String(s._id)} style={{
                display: "flex", gap: 12, padding: "18px 20px",
                borderRight:  (i % 4 !== 3) ? "1px solid var(--border-subtle)" : 0,
                borderBottom: i < arr.length - 4 ? "1px solid var(--border-subtle)" : 0,
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={s.icon} size={20} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: s.count > 0 ? "var(--fg-3)" : "var(--fg-4)", marginTop: 2 }}>
                    {s.count > 0 ? s.count + " active" : "none active"}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPage });