// tables.jsx — KPI cards, exceptions table, right detail panel
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

/* ---------- format helpers ---------- */
function fmtWait(h) {
  if (h < 24) return h + "h";
  const d = Math.floor(h / 24), r = h % 24;
  return r ? `${d}d ${r}h` : `${d}d`;
}
function waitTone(h, breach) {
  if (h >= 48) return "text-red-600";
  if (h >= 24) return "text-orange-600";
  return "text-zinc-600";
}

/* ---------- KPI card ---------- */
function KpiCard({ kpi, loading, onClick, active }) {
  if (loading) {
    return (
      <div className="bg-white rounded-xl border border-zinc-200 p-4">
        <Skeleton className="h-3 w-24 mb-3" />
        <Skeleton className="h-7 w-16 mb-3" />
        <Skeleton className="h-6 w-full" />
      </div>
    );
  }
  const goodTrend = !kpi.bad;
  const trendColor = goodTrend ? "#16a34a" : "#dc2626";
  return (
    <button onClick={onClick}
      className={`group text-left bg-white rounded-xl border p-4 transition-all duration-150 hover:shadow-[0_2px_12px_rgba(0,0,0,0.06)] hover:-translate-y-px
        ${active ? "border-zinc-300 ring-1 ring-zinc-300" : "border-zinc-200 hover:border-zinc-300"}`}>
      <div className="flex items-center justify-between mb-2.5">
        <span className="text-[12px] font-medium text-zinc-500">{kpi.label}</span>
        <span className="inline-flex items-center gap-0.5 text-[11px] font-semibold px-1.5 py-0.5 rounded-md"
          style={{ color: trendColor, background: goodTrend ? "#f0fdf4" : "#fef2f2" }}>
          <Icon name={kpi.trend === "up" ? "trend_up" : "trend_dn"} size={12} strokeWidth={2.25} />
          {kpi.delta}
        </span>
      </div>
      <div className="flex items-end justify-between gap-2">
        <div>
          <div className="text-[26px] font-semibold text-zinc-900 leading-none tracking-tight tabular-nums">{kpi.value}</div>
          <div className="text-[11px] text-zinc-400 mt-1.5">{kpi.sub}</div>
        </div>
        <Sparkline data={kpi.spark} color={kpi.bad ? "#f87171" : "var(--accent)"} w={72} h={28} />
      </div>
    </button>
  );
}

/* ---------- Exceptions table ---------- */
function ExceptionTable({ rows, loading, selectedId, onSelect, density = "comfortable", showStatus = true }) {
  const pad = density === "compact" ? "py-2.5" : "py-3.5";
  const cols = [
    { k: "id", label: "Order ID", w: "w-[112px]" },
    { k: "cust", label: "Customer" },
    { k: "car", label: "Car Model" },
    { k: "issue", label: "Issue Type" },
    { k: "prio", label: "Priority", w: "w-[104px]" },
    { k: "wait", label: "Waiting", w: "w-[88px]" },
    { k: "action", label: "Suggested Action" },
    { k: "staff", label: "Assigned", w: "w-[150px]" },
  ];

  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse min-w-[1040px]">
        <thead>
          <tr className="border-b border-zinc-200">
            {cols.map(c => (
              <th key={c.k} className={`text-left ${c.w || ""} px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 whitespace-nowrap select-none`}>
                {c.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {loading
            ? Array.from({ length: 7 }).map((_, i) => <SkeletonRow key={i} pad={pad} />)
            : rows.map(r => {
                const sel = r.id === selectedId;
                return (
                  <tr key={r.id} onClick={() => onSelect(r)}
                    className={`group cursor-pointer border-b border-zinc-100 transition-colors ${sel ? "" : "hover:bg-zinc-50"}`}
                    style={sel ? { background: "var(--accent-wash)" } : undefined}>
                    {/* Order ID */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <div className="flex items-center gap-2">
                        {sel && <span className="w-1 h-4 rounded-full -ml-1" style={{ background: "var(--accent)" }} />}
                        <span className="font-mono text-[12px] font-medium text-zinc-700">{r.id}</span>
                      </div>
                    </td>
                    {/* Customer */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <div className="flex items-center gap-2.5 min-w-0">
                        <Avatar person={r.customer} size={28} />
                        <div className="min-w-0 leading-tight">
                          <div className="text-[13px] font-medium text-zinc-800 truncate">{r.customer.name}</div>
                          <div className="text-[11px] text-zinc-400 truncate">{r.channel} · {r.created}</div>
                        </div>
                      </div>
                    </td>
                    {/* Car */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <span className="text-[12.5px] text-zinc-600 whitespace-nowrap">{r.car}</span>
                    </td>
                    {/* Issue */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <span className="text-[12.5px] font-medium text-zinc-700 whitespace-nowrap">{r.issue}</span>
                    </td>
                    {/* Priority */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <div className="flex items-center gap-1.5">
                        <PriorityBadge level={r.priority} />
                        <RiskChip row={r} />
                      </div>
                    </td>
                    {/* Wait */}
                    <td className={`px-3 ${pad} align-middle`}>
                      <span className={`text-[12.5px] font-semibold tabular-nums ${waitTone(r.waitH)}`}>{fmtWait(r.waitH)}</span>
                    </td>
                    {/* Suggested action */}
                    <td className={`px-3 ${pad} align-middle max-w-[260px]`}>
                      <div className="flex items-center gap-1.5 text-zinc-500">
                        <Icon name="sparkles" size={13} style={{ color: "var(--accent)" }} className="shrink-0" />
                        <span className="text-[12.5px] truncate" title={r.suggested}>{r.suggested}</span>
                      </div>
                    </td>
                    {/* Staff */}
                    <td className={`px-3 ${pad} align-middle`}>
                      {r.staff ? (
                        <div className="flex items-center gap-2">
                          <Avatar person={STAFF[r.staff]} size={24} />
                          <span className="text-[12px] text-zinc-600 truncate">{STAFF[r.staff].name.split(" ")[0]} {STAFF[r.staff].name.split(" ")[1]?.[0]}.</span>
                        </div>
                      ) : (
                        <span className="inline-flex items-center gap-1.5 text-[12px] text-zinc-400">
                          <Avatar person={null} size={24} /> Unassigned
                        </span>
                      )}
                    </td>
                  </tr>
                );
              })}
        </tbody>
      </table>
    </div>
  );
}

function SkeletonRow({ pad }) {
  return (
    <tr className="border-b border-zinc-100">
      <td className={`px-3 ${pad}`}><Skeleton className="h-3.5 w-20" /></td>
      <td className={`px-3 ${pad}`}><div className="flex items-center gap-2.5"><Skeleton className="w-7 h-7 rounded-full" /><div className="space-y-1.5"><Skeleton className="h-3 w-24" /><Skeleton className="h-2.5 w-16" /></div></div></td>
      <td className={`px-3 ${pad}`}><Skeleton className="h-3 w-28" /></td>
      <td className={`px-3 ${pad}`}><Skeleton className="h-3 w-24" /></td>
      <td className={`px-3 ${pad}`}><Skeleton className="h-5 w-16 rounded-full" /></td>
      <td className={`px-3 ${pad}`}><Skeleton className="h-3 w-10" /></td>
      <td className={`px-3 ${pad}`}><Skeleton className="h-3 w-40" /></td>
      <td className={`px-3 ${pad}`}><div className="flex items-center gap-2"><Skeleton className="w-6 h-6 rounded-full" /><Skeleton className="h-3 w-16" /></div></td>
    </tr>
  );
}

Object.assign(window, { KpiCard, ExceptionTable, fmtWait, waitTone });