// ARS Service Management — Dashboard + helpers

// status badge helper
function StatusBadge({ status }) {
  const map = {
    active:           { cls: "badge--active", label: "Active" },
    pending_approval: { cls: "badge--pending", label: "Pending approval" },
    awaiting_customer:{ cls: "badge--draft", label: "Awaiting customer" },
    draft:            { cls: "badge--draft", label: "Draft" },
    expired:          { cls: "badge--expired", label: "Expired" },
    expiring:         { cls: "badge--pending", label: "Expiring soon" },
  };
  const m = map[status] || { cls: "", label: status };
  return <span className={"badge " + m.cls}>{m.label}</span>;
}

function daysUntil(end) {
  if (!end || end === "—") return Infinity;
  const d = new Date(end).getTime() - Date.now();
  return Math.round(d / (24*3600*1000));
}

function fmtDate(s) {
  if (!s || s === "—") return "—";
  const d = new Date(s);
  if (isNaN(d)) return s;
  const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${String(d.getDate()).padStart(2,"0")}-${m[d.getMonth()]}-${String(d.getFullYear()).slice(-2)}`;
}

window.StatusBadge = StatusBadge;
window.daysUntil = daysUntil;
window.fmtDate = fmtDate;

function Sparkline({ data, color = "#0f2a6b", height = 38, width = 160 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * width;
    const y = height - ((v - min) / range) * height;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  const area = `0,${height} ${pts} ${width},${height}`;
  return (
    <svg width={width} height={height} style={{ display: "block" }}>
      <polygon points={area} fill={color} opacity="0.08" />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}
window.Sparkline = Sparkline;

function Dashboard({ ctx }) {
  const { registrations, go, role, t, currentUser } = ctx;
  const total = registrations.length;
  const pending = registrations.filter(r => r.status === "pending_approval").length;
  const active = registrations.filter(r => r.status === "active").length;
  const expiringSoon = registrations.filter(r => {
    if (r.status !== "active") return false;
    const d = daysUntil(r.warranty.end);
    return d >= 0 && d <= 365;
  }).length;

  // Status breakdown
  const awaitingCustomer = registrations.filter(r => r.status === "awaiting_customer").length;
  const byStatus = [
    { key: "active",            label: "Active",            color: "#16a34a", count: active },
    { key: "pending_approval",  label: "Pending approval",  color: "#d97706", count: pending },
    { key: "awaiting_customer", label: "Awaiting customer", color: "#0ea5e9", count: awaitingCustomer },
    { key: "draft",             label: "Draft",             color: "#9ca3af", count: registrations.filter(r => r.status==="draft").length },
    { key: "expiring",          label: "Expiring < 365d",   color: "#e11d48", count: expiringSoon },
  ];
  const sumStatus = byStatus.reduce((a,b) => a + b.count, 0) || 1;

  // Registrations over time (synthetic monthly)
  const monthly = [4, 7, 6, 9, 11, 8, 13, 10, 14, 18, 15, 22];

  // Top brand share
  const brandCount = {};
  registrations.forEach(r => brandCount[r.product.brand] = (brandCount[r.product.brand] || 0) + 1);

  // Recent activity — derived from real registration events.
  // We synthesise up to 3 events per row (create / submit / approve) and
  // pick the 5 most recent across the dataset. Falls back to mock ACTIVITY
  // only if there are no registrations yet (so a brand-new install still
  // shows *something* rather than an empty card).
  const activity = React.useMemo(() => {
    const items = [];
    registrations.forEach(r => {
      // For draft records (no arsNo yet), show PO number as identifier
      const displayId = r.arsNo || (r.poNo ? `PO ${r.poNo}` : r.id);
      if (r.registerDate && r.registerDate !== '—') {
        items.push({
          kind: 'create',
          actor: r.createdBy || 'System',
          action: 'เริ่มต้นการลงทะเบียน PO',
          target: displayId,
          ts: r.registerDate,
          sortKey: new Date(r.registerDate).getTime() || 0,
        });
      }
      if (r.submittedAt && r.submittedAt !== '—' && r.arsNo) {
        items.push({
          kind: 'submit',
          actor: r.createdBy || 'System',
          action: 'ส่งคำขอ approve',
          target: displayId,
          ts: r.submittedAt,
          sortKey: new Date(r.submittedAt).getTime() || 0,
        });
      }
      if (r.approvedAt && r.approvedAt !== '—') {
        items.push({
          kind: 'approve',
          actor: r.approvedBy || 'System',
          action: r.certificateIssued ? 'อนุมัติและออก Certificate' : 'อนุมัติ',
          target: displayId,
          ts: r.approvedAt,
          sortKey: new Date(r.approvedAt).getTime() || 0,
        });
      }
    });
    items.sort((a, b) => b.sortKey - a.sortKey);
    return items.slice(0, 5);
  }, [registrations]);

  // Approvals queue preview (3)
  const queue = registrations.filter(r => r.status === "pending_approval").slice(0, 3);

  // Expiring this year
  const expiringList = registrations
    .filter(r => r.status === "active")
    .map(r => ({ ...r, _days: daysUntil(r.warranty.end) }))
    .sort((a,b) => a._days - b._days)
    .slice(0, 5);

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <h1 className="page__title">สวัสดี, {currentUser?.name || role} 👋</h1>
          <p className="page__sub">ภาพรวม ARS Service Management ของวันนี้ • {new Date().toLocaleDateString("th-TH", { day: "numeric", month: "long", year: "numeric" })}</p>
        </div>
        <div className="page__actions">
          <button className="btn"><Icon name="download" size={16}/> Export</button>
          <button className="btn btn--primary" onClick={() => go("new")}><Icon name="plus" size={16}/> New Registration</button>
        </div>
      </div>

      {t.showWelcome && pending > 0 && ctx.can("approve") && (
        <div className="note" style={{ marginBottom: 16 }}>
          <Icon name="bell" size={16}/>
          <div>
            <strong>มีคำขอรอ Approve {pending} รายการ</strong>
            <span style={{ marginLeft: 8 }}>คลิกเพื่อตรวจสอบและออก Certificate ให้ลูกค้า →</span>
          </div>
          <button className="btn btn--sm btn--primary" style={{ marginLeft: "auto" }} onClick={() => go("approvals")}>Review now</button>
        </div>
      )}

      {/* KPI tiles */}
      <div className="kpi-grid">
        <div className="kpi">
          <span className="kpi__label">ARS ทั้งหมด</span>
          <div className="spread">
            <span className="kpi__value">{total}</span>
            <Sparkline data={monthly} color="#0f2a6b" />
          </div>
          <span className="kpi__delta up">▲ +18.2% YoY</span>
          <div className="kpi__bar"></div>
        </div>
        <div className="kpi kpi--green">
          <span className="kpi__label">Active Certificates</span>
          <div className="spread">
            <span className="kpi__value">{active}</span>
            <Icon name="cert" size={32} color="#16a34a" />
          </div>
          <span className="kpi__delta up">▲ {total > 0 ? Math.round((active/total)*100) : 0}% ของทั้งหมด</span>
          <div className="kpi__bar"></div>
        </div>
        <div className="kpi kpi--amber">
          <span className="kpi__label">Pending Approval</span>
          <div className="spread">
            <span className="kpi__value">{pending}</span>
            <Icon name="clock" size={32} color="#d97706" />
          </div>
          <span className={"kpi__delta " + (pending > 0 ? "down" : "muted")}>
            {pending > 0 ? `ต้องดำเนินการภายใน 24 ชม.` : "ไม่มีรายการค้าง"}
          </span>
          <div className="kpi__bar"></div>
        </div>
        <div className="kpi kpi--accent">
          <span className="kpi__label">Expiring &lt; 12 เดือน</span>
          <div className="spread">
            <span className="kpi__value">{expiringSoon}</span>
            <Icon name="bell" size={32} color="#e11d48" />
          </div>
          <span className="kpi__delta down">ติดต่อต่ออายุ</span>
          <div className="kpi__bar"></div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginTop: 16 }}>
        {/* Status monitoring */}
        <div className="card">
          <div className="card__header">
            <div>
              <h3 className="card__title">Status Monitoring</h3>
              <p className="card__sub">การกระจายตัวของ registration ตามสถานะ</p>
            </div>
            <button className="btn btn--ghost btn--sm">12 เดือนล่าสุด <Icon name="chevron-right" size={14}/></button>
          </div>
          <div className="card__body">
            {/* Stacked horizontal bar */}
            <div style={{ display: "flex", height: 14, borderRadius: 8, overflow: "hidden", border: "1px solid var(--border)" }}>
              {byStatus.map(s => (
                <div key={s.key} style={{ background: s.color, width: `${(s.count/sumStatus)*100}%` }} title={`${s.label}: ${s.count}`} />
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginTop: 14 }}>
              {byStatus.map(s => (
                <div key={s.key} className="spread" style={{ background: "var(--surface-2)", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--border)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 10, height: 10, borderRadius: "50%", background: s.color }}></span>
                    <span style={{ fontSize: 13 }}>{s.label}</span>
                  </div>
                  <strong style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>{s.count}</strong>
                </div>
              ))}
            </div>

            <div className="divider"></div>
            <h4 className="section-h">ใกล้หมดอายุ — Top 5</h4>
            <table className="table" style={{ marginTop: 4 }}>
              <thead><tr><th>ARS no.</th><th>Customer</th><th>End date</th><th style={{textAlign:"right"}}>เหลือ</th></tr></thead>
              <tbody>
                {expiringList.map(r => (
                  <tr key={r.id} className="clickable" onClick={() => go("registrations", r.id)}>
                    <td className="mono">{r.id}</td>
                    <td>{r.customer.company}</td>
                    <td>{fmtDate(r.warranty.end)}</td>
                    <td className="num" style={{ textAlign: "right" }}>
                      <span className={r._days < 180 ? "badge badge--pending" : "badge badge--active"} style={{padding:"2px 8px"}}>{r._days} วัน</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Right column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {ctx.can("approve") && (
            <div className="card">
              <div className="card__header">
                <div>
                  <h3 className="card__title">Approvals Queue</h3>
                  <p className="card__sub">{pending} รายการรอการอนุมัติ</p>
                </div>
                <button className="btn btn--sm" onClick={() => go("approvals")}>ดูทั้งหมด</button>
              </div>
              <div className="card__body card__body--flush">
                {queue.length === 0 && <div style={{ padding: 22, textAlign: "center", color: "var(--text-muted)" }}>ไม่มีรายการรอ Approve 🎉</div>}
                {queue.map(r => (
                  <div key={r.id} style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", gap: 12, alignItems: "center" }}>
                    <div className="avatar" style={{ background: "var(--jt-navy-700)" }}>{(r.customer.company||"?").slice(0,2).toUpperCase()}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="spread" style={{ gap: 6 }}>
                        <strong style={{ fontSize: 13 }}>{r.customer.company}</strong>
                        <span className="mono small muted">{r.id}</span>
                      </div>
                      <div className="muted small" style={{ marginTop: 2 }}>
                        {r.product.model} • S/N {r.product.serial}
                      </div>
                    </div>
                    <button className="btn btn--sm btn--primary" onClick={() => go("approvals")}>Review</button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {t.showActivity && (
            <div className="card">
              <div className="card__header">
                <h3 className="card__title">Recent Activity</h3>
              </div>
              <div className="card__body">
                {activity.length === 0 ? (
                  <div style={{ padding: "12px 0", textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>
                    ยังไม่มี activity
                  </div>
                ) : (
                  <ul className="timeline">
                    {activity.map((a, i) => (
                      <li key={i}>
                        <span className={"dot " + (a.kind === "approve" ? "green" : a.kind === "submit" ? "amber" : a.kind === "create" ? "" : "gray")}></span>
                        <div className="body">
                          <span><strong>{a.actor}</strong> {a.action}</span>
                          <span style={{ display: "block", fontSize: 12.5 }} className="mono muted">{a.target}</span>
                          <span className="ts">{a.ts}</span>
                        </div>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;