// rightpanel.jsx — contextual order detail panel: AI summary, workflow + assignment, timeline
const { useState: useStateR, useEffect: useEffectR } = React;

// resolve an avatar "actor" for a workflow event
function actorForEvent(ev, row) {
  if (ev.actor) return userById(ev.actor);
  switch (ev.icon) {
    case "ai": return { name: "OpsPilot AI", initials: "AI", color: "#0891b2", ai: true };
    case "chat": return { ...row.customer, _customer: true };
    case "user": return row.staff ? STAFF[row.staff] : null;
    default: return null; // system event -> neutral node
  }
}

function WorkflowNode({ actor, icon }) {
  if (actor) {
    return (
      <span className="relative z-10 shrink-0">
        <Avatar person={actor} size={26} />
        {actor.ai && <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-white flex items-center justify-center"><span className="w-2 h-2 rounded-full" style={{ background: "#0891b2" }} /></span>}
      </span>
    );
  }
  return (
    <span className="relative z-10 flex items-center justify-center w-[26px] h-[26px] rounded-full bg-white border border-zinc-200 text-zinc-400 shrink-0">
      <Icon name={icon} size={12} />
    </span>
  );
}

function DetailPanel({ row, perms, onClose, onResolve, onEscalate, onAssign, onPriority, onReplyLogged, onLark }) {
  const [summaryLoading, setSummaryLoading] = useStateR(true);

  useEffectR(() => {
    setSummaryLoading(true);
    const t = setTimeout(() => setSummaryLoading(false), 480);
    return () => clearTimeout(t);
  }, [row.id]);

  const readOnly = !perms.act;
  const sig = signalsFor(row.id);

  return (
    <div className="flex flex-col h-full bg-white border-l border-zinc-200 w-[388px] shrink-0">
      {/* header */}
      <div className="flex items-center gap-2 px-5 h-16 border-b border-zinc-200 shrink-0">
        <span className="font-mono text-[13px] font-semibold text-zinc-800">{row.id}</span>
        <StatusChip status={row.status} />
        <button onClick={onClose} className="ml-auto flex items-center justify-center w-8 h-8 rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 transition-colors"><Icon name="x" size={18} /></button>
      </div>

      <div className="flex-1 overflow-y-auto">
        {/* customer block */}
        <div className="px-5 py-4 border-b border-zinc-100">
          <div className="flex items-center gap-3">
            <Avatar person={row.customer} size={42} />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1.5">
                <div className="text-[14px] font-semibold text-zinc-900 truncate">{row.customer.name}</div>
                {sig.vip && <span className="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wide" style={{ background: "#fef3c7", color: "#a16207" }}>VIP</span>}
              </div>
              <div className="text-[12px] text-zinc-500 truncate">{row.customer.email}</div>
            </div>
            <PriorityBadge level={row.priority} />
          </div>
          <div className="grid grid-cols-2 gap-x-4 gap-y-3 mt-4">
            <Field label="Car Model" value={row.car} />
            <Field label="Order Value" value={"RM " + row.value.toLocaleString()} mono />
            <Field label="Channel" value={row.channel} />
            <Field label="Waiting Time" value={fmtWait(row.waitH)} tone={waitTone(row.waitH)} mono />
            <div className="col-span-2"><Field label="Product" value={row.product} /></div>
          </div>
        </div>

        {/* AI auto-summary (issue / next step / escalation) */}
        <AutoSummary row={row} loading={summaryLoading} />

        {/* Smart prioritization — AI risk score */}
        <RiskPanel row={row} />

        {/* task assignment controls — managers only */}
        {perms.assign && (
          <div className="px-5 py-4 border-b border-zinc-100">
            <div className="flex items-center gap-2 mb-3"><Icon name="users" size={14} className="text-zinc-500" /><span className="text-[12px] font-semibold text-zinc-700">Assignment &amp; Workflow</span></div>
            <div className="space-y-3">
              <div className="flex items-center justify-between gap-2">
                <span className="text-[12px] text-zinc-500">Assigned to</span>
                <div className="relative inline-flex items-center">
                  <select value={row.staff || ""} onChange={e => onAssign(row, e.target.value || null)}
                    className="appearance-none h-8 pl-2.5 pr-7 rounded-lg bg-white border border-zinc-200 text-[12.5px] font-medium text-zinc-700 hover:border-zinc-300 focus:outline-none focus:border-zinc-400 cursor-pointer">
                    <option value="">Unassigned</option>
                    {Object.keys(STAFF).map(k => <option key={k} value={k}>{STAFF[k].name} · {STAFF[k].role}</option>)}
                  </select>
                  <span className="absolute right-2 text-zinc-400 pointer-events-none"><Icon name="chevdown" size={13} /></span>
                </div>
              </div>
              <div className="flex items-center justify-between gap-2">
                <span className="text-[12px] text-zinc-500">Priority</span>
                <div className="inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-zinc-100 border border-zinc-200">
                  {["high", "medium", "low"].map(lv => {
                    const on = row.priority === lv;
                    return <button key={lv} onClick={() => onPriority(row, lv)} className={`px-2.5 py-1 rounded-md text-[11.5px] font-medium capitalize transition-all ${on ? "bg-white shadow-sm" : "text-zinc-500 hover:text-zinc-700"}`} style={on ? { color: PRIORITY[lv].text } : undefined}>{lv}</button>;
                  })}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* AI reply generator (channel + tone) — actionable roles only */}
        {!readOnly && <ReplyGenerator row={row} onLogged={(r, ch) => onReplyLogged && onReplyLogged(r, ch)} />}

        {/* Lark connected actions — actionable roles only */}
        {!readOnly && (
          <div className="px-5 py-4 border-b border-zinc-100">
            <div className="flex items-center gap-2 mb-2.5">
              <span className="flex items-center justify-center w-5 h-5 rounded-md text-white" style={{ background: "#00d6b9" }}><Icon name="send" size={11} /></span>
              <span className="text-[12px] font-semibold text-zinc-700">Lark Actions</span>
              <span className="ml-auto text-[10px] font-medium text-zinc-400 px-1.5 py-0.5 rounded bg-zinc-100">connected</span>
            </div>
            <div className="space-y-1.5">
              {LARK_ACTIONS.map(la => (
                <button key={la.key} onClick={() => onLark && onLark(row, la)}
                  className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg border border-zinc-200 hover:border-zinc-300 hover:bg-zinc-50 transition-colors text-left group">
                  <span className="flex items-center justify-center w-7 h-7 rounded-md bg-zinc-100 text-zinc-500 group-hover:text-zinc-700 shrink-0"><Icon name={la.icon} size={14} /></span>
                  <span className="text-[12.5px] font-medium text-zinc-700 flex-1">{la.label}</span>
                  <span className="text-[11px] text-zinc-400 font-mono">{la.channel}</span>
                  <Icon name="arrow_r" size={13} className="text-zinc-300 group-hover:text-zinc-500" />
                </button>
              ))}
            </div>
          </div>
        )}

        {/* workflow timeline */}
        <div className="px-5 py-4">
          <div className="flex items-center gap-2 mb-3.5"><Icon name="clock" size={14} className="text-zinc-500" /><span className="text-[12px] font-semibold text-zinc-700">Workflow Timeline</span></div>
          <ol className="relative">
            {row.timeline.map((ev, i) => {
              const last = i === row.timeline.length - 1;
              const actor = actorForEvent(ev, row);
              return (
                <li key={i} className="relative flex gap-3 pb-4 last:pb-0">
                  {!last && <span className="absolute left-[12px] top-7 bottom-0 w-px bg-zinc-200" />}
                  <WorkflowNode actor={actor} icon={ev.icon} />
                  <div className="min-w-0 -mt-0.5">
                    <div className="text-[12.5px] text-zinc-700 leading-snug">{ev.e}</div>
                    <div className="text-[11px] text-zinc-400 mt-0.5">{actor ? actor.name + " · " : ""}{ev.t}</div>
                  </div>
                </li>
              );
            })}
          </ol>
          <div className="mt-1 pt-4 border-t border-zinc-100 space-y-3">
            <div className="flex items-center gap-2 text-[12px]"><Icon name="flag" size={13} className="text-zinc-400" /><span className="text-zinc-500">Triggered by</span><span className="text-zinc-700 font-medium">{row.rule}</span></div>
            <div className="flex items-center gap-2 text-[12px]"><Icon name="user" size={13} className="text-zinc-400" /><span className="text-zinc-500">Owner</span>
              {row.staff ? <span className="inline-flex items-center gap-1.5 text-zinc-700 font-medium"><Avatar person={STAFF[row.staff]} size={18} /> {STAFF[row.staff].name}</span> : <span className="text-zinc-400">Unassigned</span>}
            </div>
          </div>
        </div>
      </div>

      {/* action footer */}
      <div className="border-t border-zinc-200 p-4 shrink-0 bg-white">
        {readOnly ? (
          <div className="flex items-center justify-center gap-2 text-[12px] text-zinc-400 py-1.5"><Icon name="eye" size={14} /> Read-only access — actions disabled for your role</div>
        ) : (
          <div className="grid grid-cols-2 gap-2">
            <Button variant="default" size="md" icon="escalate" onClick={() => onEscalate(row)}>Escalate</Button>
            <Button variant="primary" size="md" icon="resolve" onClick={() => onResolve(row)}>Mark Resolved</Button>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, mono, tone }) {
  return (
    <div className="min-w-0">
      <div className="text-[10.5px] font-medium uppercase tracking-wide text-zinc-400 mb-0.5">{label}</div>
      <div className={`text-[12.5px] font-medium truncate ${tone || "text-zinc-700"} ${mono ? "tabular-nums" : ""}`}>{value}</div>
    </div>
  );
}

function DetailEmpty() {
  return (
    <div className="hidden xl:flex flex-col items-center justify-center h-full bg-white border-l border-zinc-200 w-[388px] shrink-0 px-8 text-center">
      <div className="flex items-center justify-center w-14 h-14 rounded-2xl mb-4" style={{ background: "var(--accent-wash)" }}><Icon name="pin" size={24} style={{ color: "var(--accent)" }} /></div>
      <h3 className="text-[14px] font-semibold text-zinc-700">No order selected</h3>
      <p className="text-[12.5px] text-zinc-400 mt-1 leading-relaxed">Select any exception to see its AI summary, workflow timeline and assignment controls.</p>
    </div>
  );
}

Object.assign(window, { DetailPanel, DetailEmpty });