// CareHome — Customer Care lead's landing. Producer health + tickets + escalations.
// "Customer" here = the producer (entrepreneur tenant). End consumers are managed in Admin.

const PRODUCER_HEALTH = [
  { name: "Khao Hom Thai",   ownerLocale: "🇹🇭", contact: "Khun Somchai", mrr: 1247500, health: 92, signals: "All systems healthy",         lastTouch: "2d ago", tone: "success" },
  { name: "Siam Cosmetic",   ownerLocale: "🇹🇭", contact: "Khun Nattaya", mrr: 2840000, health: 84, signals: "1 open ticket · standard SLA", lastTouch: "1d ago", tone: "success" },
  { name: "Bangkok Beauty",  ownerLocale: "🇹🇭", contact: "Khun Mali",    mrr:       0, health: 58, signals: "Onboarding stuck · 12d",       lastTouch: "5h ago", tone: "warning" },
  { name: "Thai Wellness",   ownerLocale: "🇹🇭", contact: "Khun Pakorn",  mrr:  420000, health: 32, signals: "Account suspended · payment",  lastTouch: "8d ago", tone: "danger" },
  { name: "Riang Mai Coffee",ownerLocale: "🇹🇭", contact: "Khun Tan",     mrr:  620000, health: 88, signals: "Active · live this week",      lastTouch: "6h ago", tone: "success" },
  { name: "Lanna Tea",       ownerLocale: "🇹🇭", contact: "Khun Kanya",   mrr:  312000, health: 64, signals: "GMV declining · 3 weeks",      lastTouch: "3d ago", tone: "warning" },
];

const TICKETS = [
  { id: "TK-2026-4821", producer: "Bangkok Beauty", subj: "Cannot upload product images > 5MB",   priority: "high", sla: "1h 42m", slaPct: 28, layer: "L2 producer" },
  { id: "TK-2026-4819", producer: "Siam Cosmetic",  subj: "Settlement statement missing line",    priority: "med",  sla: "3h 12m", slaPct: 58, layer: "L2 producer" },
  { id: "TK-2026-4815", producer: "Thai Wellness",  subj: "Reactivate suspended account",         priority: "high", sla: "—",      slaPct: 0,  layer: "Compliance" },
  { id: "TK-2026-4810", producer: "Lanna Tea",      subj: "Why is my GMV trending down?",          priority: "std",  sla: "8h",     slaPct: 88, layer: "L1 producer" },
  { id: "TK-2026-4802", producer: "Krua Phuket",    subj: "Add second brand manager to my org",   priority: "std",  sla: "1d",     slaPct: 92, layer: "L1 producer" },
];

const CARE_KPIS = [
  { lbl: "Open tickets",    val: "14",   trend: [22, 20, 18, 17, 16, 15, 14, 14], tone: "warning", foot: "3 SLA at risk" },
  { lbl: "First response",  val: "12m",  trend: [22, 20, 18, 16, 14, 13, 12, 12], tone: "success", foot: "Target ≤15m" },
  { lbl: "My producers",    val: "22",   trend: [16, 18, 20, 21, 22, 22, 22, 22], tone: "primary", foot: "2 at risk · 1 churn" },
  { lbl: "NPS · last 30d",  val: "62",   trend: [52, 54, 56, 58, 60, 61, 62, 62], tone: "success", foot: "+10 vs Q4" },
];

function CareHome() {
  return (
    <div>
      <div className="page-head">
        <h1>Customer Care</h1>
        <span className="count">Mar 18, 2026 · 22 producers in my book</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-history"></i>Audit log</button>
          <button className="btn secondary"><i className="ti ti-phone"></i>Schedule check-in</button>
          <button className="btn primary"><i className="ti ti-ticket"></i>Open ticket</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        {CARE_KPIS.map((k, i) => (
          <div key={i} className="kpi">
            <div className="head"><span className="lbl">{k.lbl}</span></div>
            <div className="val">{k.val}</div>
            <Sparkline data={k.trend} width={240} height={28} tone={k.tone === "primary" ? "success" : k.tone} />
            <div className="foot">{k.foot}</div>
          </div>
        ))}
      </div>

      <div className="dash-grid" style={{gridTemplateColumns: "1.4fr 1fr"}}>
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Producer health monitor</h3>
              <span className="label-caps">My book · {PRODUCER_HEALTH.length} producers</span>
            </div>
            <div>
              {PRODUCER_HEALTH.map(p => {
                const color = p.tone === "danger" ? "var(--color-text-on-danger)" : p.tone === "warning" ? "var(--color-text-on-warning)" : "var(--color-text-on-success)";
                return (
                  <div key={p.name} className="health-row">
                    <div>
                      <div className="name">{p.ownerLocale} {p.name}</div>
                      <div className="sub">{p.contact} · {p.signals}</div>
                    </div>
                    <div style={{fontFamily:"var(--font-mono)", fontSize:12, color: "var(--on-surface-variant)"}}>
                      {p.mrr > 0 ? `฿${(p.mrr/1000).toFixed(0)}K MRR` : "—"}
                    </div>
                    <div>
                      <div className="health-bar"><div className="fill" style={{width: p.health + "%", background: color}}></div></div>
                      <div style={{fontFamily:"var(--font-mono)", fontSize:10, color: color, textAlign:"right", marginTop: 2}}>{p.health}/100</div>
                    </div>
                    <div className="body-sm" style={{color:"var(--on-surface-variant)", fontSize: 11}}>{p.lastTouch}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel">
            <div className="panel-head">
              <h3>Ticket queue</h3>
              <span className="live-label"><span className="live-dot"></span>5 open</span>
            </div>
            <div className="activity">
              {TICKETS.map(t => {
                const color = t.slaPct < 40 ? "var(--color-text-on-danger)" : t.slaPct < 70 ? "var(--color-text-on-warning)" : "var(--color-text-on-success)";
                return (
                  <div key={t.id} className="activity-row" style={{gridTemplateColumns: "auto 1fr auto"}}>
                    <span className={"pill " + (t.priority === "high" ? "danger" : t.priority === "med" ? "warning" : "neutral")} style={{height: 18, padding:"0 6px", fontSize: 10}}>
                      {t.priority}
                    </span>
                    <div>
                      <div className="what">{t.subj}</div>
                      <div className="when" style={{fontFamily:"var(--font-sans)", color: "var(--on-surface-variant)"}}>{t.producer} · {t.layer}</div>
                    </div>
                    <div className="when" style={{color: color, fontWeight: 500}}>{t.sla}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><h3>Escalations</h3><span className="label-caps">3 active</span></div>
            <div className="activity">
              <div className="activity-row"><div className="av danger"><i className="ti ti-flag" style={{fontSize:11}}></i></div><div className="what">Thai Wellness · payment compliance review</div><div className="when">2d</div></div>
              <div className="activity-row"><div className="av warning"><i className="ti ti-flag" style={{fontSize:11}}></i></div><div className="what">Bangkok Beauty · onboarding stuck 12d</div><div className="when">12h</div></div>
              <div className="activity-row"><div className="av warning"><i className="ti ti-flag" style={{fontSize:11}}></i></div><div className="what">Lanna Tea · GMV decline review</div><div className="when">1d</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CareHome = CareHome;