// workpages.jsx — Audit Logs, Orders, My Tasks, Assigned Exceptions
const { useState: useStateW, useMemo: useMemoW } = React;

/* ---------- Audit Logs ---------- */
function AuditLogPage() {
  const [type, setType] = useStateW("all");
  const [q, setQ] = useStateW("");
  const rows = AUDIT.filter(a => {
    if (type !== "all" && a.type !== type) return false;
    if (q) { const u = userById(a.actor); if (!(u.name + a.action + a.detail).toLowerCase().includes(q.toLowerCase())) return false; }
    return true;
  });
  const types = Object.keys(AUDIT_TYPE);

  return (
    <div className="p-6 max-w-[940px]">
      <div className="mb-4">
        <h2 className="text-[15px] font-semibold text-zinc-900 tracking-tight">Audit Logs</h2>
        <p className="text-[12.5px] text-zinc-500 mt-0.5">Immutable record of every action across OpsPilot. Retained 365 days.</p>
      </div>

      <div className="bg-white rounded-xl border border-zinc-200 overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-zinc-200 flex-wrap">
          <div className="flex items-center gap-2 w-56 h-8 px-2.5 rounded-lg bg-zinc-100/80 border border-transparent focus-within:bg-white focus-within:border-zinc-300 transition-colors">
            <Icon name="search" size={15} className="text-zinc-400" />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search audit trail…" className="bg-transparent outline-none text-[12.5px] text-zinc-700 placeholder:text-zinc-400 w-full" />
          </div>
          <div className="flex items-center gap-1 flex-wrap ml-1">
            <FilterChips value={type} onChange={setType} options={[{ k: "all", label: "All" }, ...types.map(t => ({ k: t, label: AUDIT_TYPE[t].label }))]} />
          </div>
          <Button variant="default" size="sm" icon="download" className="ml-auto">Export CSV</Button>
        </div>

        <ol>
          {rows.map((a, i) => {
            const u = userById(a.actor);
            const ty = AUDIT_TYPE[a.type];
            return (
              <li key={a.id} className="flex items-start gap-3 px-4 py-3 border-b border-zinc-100 last:border-0 hover:bg-zinc-50/60 transition-colors">
                <div className="relative shrink-0">
                  <Avatar person={u} size={32} />
                  <span className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center ring-2 ring-white" style={{ background: ty.bg, color: ty.color }}>
                    <Icon name={ty.icon} size={9} strokeWidth={2.25} />
                  </span>
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-[13px] text-zinc-700 leading-snug">
                    <span className="font-semibold text-zinc-900">{u.name}</span> {a.action}
                    {a.detail && <span className="text-zinc-500"> — {a.detail}</span>}
                  </p>
                  <div className="flex items-center gap-2 mt-1 text-[11px] text-zinc-400">
                    <span>{a.time}</span><span>·</span>
                    <span className="font-mono">{a.ip}</span>
                  </div>
                </div>
                <span className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10.5px] font-medium shrink-0" style={{ background: ty.bg, color: ty.color }}>{ty.label}</span>
              </li>
            );
          })}
          {rows.length === 0 && <li className="px-4 py-10 text-center text-[13px] text-zinc-400">No matching audit entries.</li>}
        </ol>
      </div>
    </div>
  );
}

/* ---------- Orders ---------- */
const OSTATUS = {
  delivered: { label: "Delivered", color: "#15803d", bg: "#f0fdf4", dot: "#22c55e" },
  shipped:   { label: "Shipped",   color: "#1d4ed8", bg: "#eff6ff", dot: "#3b82f6" },
  packed:    { label: "Packed",    color: "#7c3aed", bg: "#f5f3ff", dot: "#8b5cf6" },
  paid:      { label: "Paid",      color: "#0f766e", bg: "#f0fdfa", dot: "#14b8a6" },
  exception: { label: "Exception", color: "#b91c1c", bg: "#fef2f2", dot: "#ef4444" },
};
const HEALTHY_ORDERS = [
  { id: "TRP-48312", customer: cust("Lee Sze Han", "szehan@gmail.com", "#2563eb"), car: "Honda Civic 2024", product: "HEX II Floor Mat", value: 289, status: "delivered", date: "Today, 09:14" },
  { id: "TRP-48309", customer: cust("Aaron Yap", "aaron.yap@gmail.com", "#16a34a"), car: "Toyota Vios 2024", product: "3D Trunk Liner", value: 199, status: "shipped", date: "Today, 08:50" },
  { id: "TRP-48305", customer: cust("Mira Sulaiman", "mira.s@outlook.com", "#db2777"), car: "Perodua Bezza 2023", product: "Door Sill Protector", value: 89, status: "delivered", date: "Today, 08:02" },
  { id: "TRP-48298", customer: cust("Kenneth Ooi", "kenneth.ooi@gmail.com", "#7c3aed"), car: "Mazda 3 2023", product: "HEX Anti-Fatigue Mat", value: 349, status: "packed", date: "Yesterday, 19:40" },
  { id: "TRP-48291", customer: cust("Devi Krishnan", "devi.k@gmail.com", "#ea580c"), car: "Proton X70 2024", product: "Premium HEX II Set", value: 599, status: "shipped", date: "Yesterday, 17:22" },
  { id: "TRP-48284", customer: cust("Bryan Tan", "bryan.t@gmail.com", "#0891b2"), car: "Honda HR-V 2023", product: "Sunshade + Trunk Liner", value: 268, status: "delivered", date: "Yesterday, 14:11" },
  { id: "TRP-48276", customer: cust("Sharifah Aliya", "sharifah.a@gmail.com", "#9333ea"), car: "Toyota Corolla 2024", product: "HEX II Floor Mat", value: 289, status: "paid", date: "Yesterday, 11:05" },
  { id: "TRP-48270", customer: cust("Vincent Loke", "vincent.l@gmail.com", "#d97706"), car: "BMW X1 2023", product: "Tailored Dashboard Cover", value: 159, status: "delivered", date: "Yesterday, 09:33" },
];
function OrdersPage({ onSelect }) {
  const [status, setStatus] = useStateW("all");
  const [q, setQ] = useStateW("");
  const exceptionOrders = EXCEPTIONS.map(e => ({ id: e.id, customer: e.customer, car: e.car, product: e.product, value: e.value, status: "exception", date: e.created, _exc: e }));
  const all = [...HEALTHY_ORDERS, ...exceptionOrders];
  const rows = all.filter(o => {
    if (status !== "all" && o.status !== status) return false;
    if (q && !(o.id + o.customer.name + o.car).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  return (
    <div className="p-6">
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5 mb-4">
        {[["Total orders", all.length, "text-zinc-900"], ["Delivered", all.filter(o=>o.status==="delivered").length, "text-emerald-600"], ["In transit", all.filter(o=>o.status==="shipped"||o.status==="packed").length, "text-blue-600"], ["With exception", exceptionOrders.length, "text-red-600"]].map(([l,v,c]) => (
          <div key={l} className="bg-white rounded-xl border border-zinc-200 px-4 py-3"><div className="text-[11.5px] text-zinc-500">{l}</div><div className={`text-[22px] font-semibold tabular-nums mt-0.5 ${c}`}>{v}</div></div>
        ))}
      </div>
      <div className="bg-white rounded-xl border border-zinc-200 overflow-hidden">
        <div className="flex items-center gap-2.5 px-4 py-3 border-b border-zinc-200 flex-wrap">
          <h2 className="text-[14px] font-semibold text-zinc-900">All Orders</h2>
          <div className="flex items-center gap-2 w-52 h-8 px-2.5 rounded-lg bg-zinc-100/80 border border-transparent focus-within:bg-white focus-within:border-zinc-300 transition-colors ml-2">
            <Icon name="search" size={15} className="text-zinc-400" />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search orders…" className="bg-transparent outline-none text-[12.5px] text-zinc-700 placeholder:text-zinc-400 w-full" />
          </div>
          <SelectMini icon="filter" value={status} onChange={setStatus} options={[{ v: "all", label: "All statuses" }, ...Object.keys(OSTATUS).map(k => ({ v: k, label: OSTATUS[k].label }))]} />
          <span className="ml-auto text-[12px] text-zinc-400">{rows.length} orders</span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse min-w-[900px]">
            <thead><tr className="border-b border-zinc-200">{["Order ID","Customer","Car / Product","Total","Status","Date",""].map((h,i)=>(<th key={i} className="text-left px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 whitespace-nowrap">{h}</th>))}</tr></thead>
            <tbody>
              {rows.map(o => {
                const s = OSTATUS[o.status];
                return (
                  <tr key={o.id} className="border-b border-zinc-100 hover:bg-zinc-50 transition-colors">
                    <td className="px-4 py-3"><span className="font-mono text-[12px] font-medium text-zinc-700">{o.id}</span></td>
                    <td className="px-4 py-3"><div className="flex items-center gap-2.5"><Avatar person={o.customer} size={28} /><span className="text-[13px] font-medium text-zinc-800">{o.customer.name}</span></div></td>
                    <td className="px-4 py-3"><div className="leading-tight"><div className="text-[12.5px] text-zinc-700">{o.car}</div><div className="text-[11.5px] text-zinc-400">{o.product}</div></div></td>
                    <td className="px-4 py-3"><span className="text-[12.5px] font-medium text-zinc-700 tabular-nums">RM {o.value}</span></td>
                    <td className="px-4 py-3"><span className="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11.5px] font-medium" style={{ background: s.bg, color: s.color }}><span className="w-1.5 h-1.5 rounded-full" style={{ background: s.dot }} />{s.label}</span></td>
                    <td className="px-4 py-3"><span className="text-[12px] text-zinc-500 tabular-nums whitespace-nowrap">{o.date}</span></td>
                    <td className="px-4 py-3 text-right">{o._exc ? <button onClick={() => onSelect(o._exc)} className="text-[12px] font-semibold inline-flex items-center gap-1" style={{ color: "var(--accent-ink)" }}>Resolve <Icon name="arrow_r" size={12} /></button> : <span className="text-[12px] text-zinc-300">—</span>}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ---------- My Tasks (Ops Staff) ---------- */
function MyTasksPage({ session, onToast }) {
  const [tasks, setTasks] = useStateW(TASKS);
  const [loading, setLoading] = useStateW(true);

  React.useEffect(() => {
    if (!session?.user?.id) { setLoading(false); return; }
    sb.from("tasks")
      .select("*")
      .eq("assigned_to", session.user.id)
      .order("created_at", { ascending: false })
      .then(({ data, error }) => {
        setLoading(false);
        if (error || !data) return;
        if (data.length > 0) {
          setTasks(data.map(t => ({
            id: t.id,
            title: t.title,
            note: t.note || "",
            order: t.order_id || "—",
            priority: t.priority || "medium",
            due: t.due || "—",
            status: t.status || "todo",
            by: t.assigned_by || "system",
          })));
        }
      });
  }, [session?.user?.id]);

  async function setStatus(t, status) {
    setTasks(ts => ts.map(x => x.id === t.id ? { ...x, status } : x));
    onToast(status === "done" ? "Task completed" : status === "in_progress" ? "Task started" : "Task reopened",
      { tone: status === "done" ? "ok" : undefined, icon: status === "done" ? "check" : "dot" });
    await sb.from("tasks").update({ status }).eq("id", t.id);
  }
  const groups = [["todo", "To do"], ["in_progress", "In progress"], ["done", "Done"]];
  return (
    <div className="p-6 max-w-[860px]">
      <div className="flex items-center gap-3 mb-4">
        <div>
          <h2 className="text-[15px] font-semibold text-zinc-900 tracking-tight">My Tasks</h2>
          <p className="text-[12.5px] text-zinc-500 mt-0.5">
            {loading ? "Loading…" : `${tasks.filter(t=>t.status!=="done").length} open · assigned to you`}
          </p>
        </div>
      </div>
      <div className="space-y-5">
        {groups.map(([g, label]) => {
          const items = tasks.filter(t => t.status === g);
          if (!items.length) return null;
          const gs = TASK_STATUS[g];
          return (
            <div key={g}>
              <div className="flex items-center gap-2 mb-2">
                <span className="w-1.5 h-1.5 rounded-full" style={{ background: gs.dot }} />
                <span className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">{label}</span>
                <span className="text-[12px] text-zinc-400">{items.length}</span>
              </div>
              <div className="space-y-2">
                {items.map(t => {
                  const mgr = userById(t.by);
                  const overdue = t.due.startsWith("Overdue");
                  return (
                    <div key={t.id} className={`bg-white rounded-xl border border-zinc-200 p-3.5 flex items-start gap-3 ${t.status === "done" ? "opacity-60" : ""}`}>
                      <button onClick={() => setStatus(t, t.status === "done" ? "todo" : "done")}
                        className={`mt-0.5 w-5 h-5 rounded-md border-2 flex items-center justify-center shrink-0 transition-colors ${t.status === "done" ? "text-white" : "border-zinc-300 hover:border-zinc-400"}`}
                        style={t.status === "done" ? { background: "var(--accent)", borderColor: "var(--accent)" } : undefined}>
                        {t.status === "done" && <Icon name="check" size={12} strokeWidth={3} />}
                      </button>
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className={`text-[13.5px] font-medium ${t.status === "done" ? "line-through text-zinc-400" : "text-zinc-800"}`}>{t.title}</span>
                          <PriorityBadge level={t.priority} />
                        </div>
                        <p className="text-[12px] text-zinc-500 mt-1 leading-snug">{t.note}</p>
                        <div className="flex items-center gap-3 mt-2 text-[11.5px] text-zinc-400">
                          <span className="font-mono">{t.order}</span>
                          <span className={`inline-flex items-center gap-1 ${overdue ? "text-red-500 font-medium" : ""}`}><Icon name="clock" size={12} />{t.due}</span>
                          <span className="inline-flex items-center gap-1"><Avatar person={mgr} size={16} /> {mgr.name}</span>
                        </div>
                      </div>
                      {t.status !== "done" && (
                        <div className="shrink-0">
                          {t.status === "todo"
                            ? <Button variant="default" size="sm" onClick={() => setStatus(t, "in_progress")}>Start</Button>
                            : <Button variant="primary" size="sm" icon="check" onClick={() => setStatus(t, "done")}>Complete</Button>}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- Assigned Exceptions (Ops Staff) ---------- */
function AssignedPage({ loading, selectedId, onSelect, density }) {
  const myOrderIds = new Set(TASKS.map(t => t.order));
  const rows = EXCEPTIONS.filter(e => myOrderIds.has(e.id));
  return (
    <div className="p-6 space-y-4">
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3.5">
        {[["Assigned to me", rows.length, "text-zinc-900"], ["High priority", rows.filter(r=>r.priority==="high").length, "text-red-600"], ["Past SLA (48h+)", rows.filter(r=>r.waitH>=48).length, "text-orange-600"]].map(([l,v,c]) => (
          <div key={l} className="bg-white rounded-xl border border-zinc-200 px-4 py-3"><div className="text-[11.5px] text-zinc-500">{l}</div><div className={`text-[22px] font-semibold tabular-nums mt-0.5 ${c}`}>{v}</div></div>
        ))}
      </div>
      <div className="bg-white rounded-xl border border-zinc-200 overflow-hidden">
        <div className="px-5 py-3.5 border-b border-zinc-200">
          <h2 className="text-[14.5px] font-semibold text-zinc-900 tracking-tight">Assigned Exceptions</h2>
          <p className="text-[11.5px] text-zinc-400 leading-tight mt-0.5">Exceptions routed to you — work them top-down by waiting time</p>
        </div>
        <ExceptionTable rows={rows} loading={loading} selectedId={selectedId} onSelect={onSelect} density={density} />
      </div>
    </div>
  );
}

Object.assign(window, { AuditLogPage, OrdersPage, MyTasksPage, AssignedPage });