/* eslint-disable */
// ============================================================
// DETAIL (PartialView: "Detail") — master-detail with lazy tabs
//
// Loads /api/rbac/related/{detailActionId}/DetailTab → ordered tab actions,
// then renders the active tab; each tab's data is only fetched when first
// opened (lazy-loaded).
// ============================================================

const { useState: useDT_S, useEffect: useDT_E, useMemo: useDT_M, useRef: useDT_R } = React;

const DetailDrawer = ({ open, detailActionId, row, role, onClose, onToast }) => {
  const [payload, setPayload] = useDT_S(null);
  const [tabs, setTabs] = useDT_S([]);
  const [activeTabId, setActiveTabId] = useDT_S(null);
  const [loaded, setLoaded] = useDT_S({}); // tabId -> bool (whether its data has been fetched)

  // Re-fetch when row/action changes
  useDT_E(() => {
    if (!open || !detailActionId) return;
    let cancelled = false;
    setPayload(null); setTabs([]); setActiveTabId(null); setLoaded({});
    Promise.all([
      mockApi.getActionPayload(detailActionId),
      mockApi.getRelatedActions(detailActionId, "DetailTab", role),
    ]).then(([p, ts]) => {
      if (cancelled) return;
      setPayload(p);
      setTabs(ts);
      const first = ts[0]?.ActionId;
      setActiveTabId(first);
      if (first) setLoaded((m) => ({ ...m, [first]: true }));
    }).catch((e) => onToast?.({ kind: "err", text: e.message }));
    return () => { cancelled = true; };
  }, [open, detailActionId, role, row?.Id]);

  useDT_E(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  if (!open) return null;

  const title = payload?.MergedParams?.Title?.replace(/\{(\w+)\}/g, (_, k) => row?.[k] ?? "") || "Detail";
  const sub = payload?.MergedParams?.Subtitle?.replace(/\{(\w+)\}/g, (_, k) => String(row?.[k] ?? "")) || "";
  const subText = (sub || "").replace(/<[^>]+>/g, "");

  return (
    <div className="fixed inset-0 z-50 backdrop-fade">
      <div className="absolute inset-0" style={{ background: "rgba(20,22,28,0.55)" }} onClick={onClose} />
      <aside
        className="absolute top-0 right-0 bottom-0 w-full sm:w-[640px] flex flex-col"
        style={{
          background: "var(--surface)",
          borderLeft: "1px solid var(--border)",
          boxShadow: "var(--shadow-lg)",
          animation: "fade .25s ease-out both",
        }}
      >
        {/* Header */}
        <div className="flex items-start gap-3 px-5 py-4 border-b" style={{ borderColor: "var(--border)" }}>
          <div className="h-10 w-10 inline-flex items-center justify-center rounded-md shrink-0" style={{ background: "var(--primary-bg)", color: "var(--primary)" }}>
            <Icon name="diamond" size={16} />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-[10.5px] uppercase tracking-wider font-semibold inline-flex items-center gap-1.5" style={{ color: "var(--primary)" }}>
              <span className="bullet"></span> Master-detail · lazy-loaded
            </div>
            <h2 className="font-semibold mt-0.5 text-[19px] tracking-tight" style={{ color: "var(--ink)", letterSpacing: "-0.01em" }}>{title}</h2>
            {subText && <div className="text-[12.5px] mt-0.5 line-clamp-2" style={{ color: "var(--muted)" }}>{subText}</div>}
          </div>
          <button onClick={onClose} className="h-9 w-9 inline-flex items-center justify-center rounded-md hover:bg-[var(--surface-2)]" style={{ color: "var(--muted)" }}>
            <Icon name="x" size={18} />
          </button>
        </div>

        {/* Tabs */}
        <div className="flex items-center gap-0 px-5 border-b overflow-x-auto scrollbar-thin" style={{ borderColor: "var(--border)" }}>
          {tabs.map((t) => {
            const isActive = t.ActionId === activeTabId;
            return (
              <button
                key={t.ActionId}
                onClick={() => { setActiveTabId(t.ActionId); setLoaded((m) => ({ ...m, [t.ActionId]: true })); }}
                className="inline-flex items-center gap-2 h-10 px-3 text-[13px] font-medium border-b-2 transition-colors whitespace-nowrap"
                style={{
                  color: isActive ? "var(--primary)" : "var(--muted)",
                  borderColor: isActive ? "var(--primary)" : "transparent",
                }}
              >
                <Icon name={t.MergedParams?.Icon} size={13} />
                {t.MergedParams?.Label}
                {!loaded[t.ActionId] && (
                  <span className="text-[10px] font-mono px-1 py-0.5 rounded" style={{ background: "var(--surface-3)", color: "var(--subtle)" }}>lazy</span>
                )}
              </button>
            );
          })}
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto scrollbar-thin">
          {tabs.map((t) => {
            if (t.ActionId !== activeTabId) return null;
            if (!loaded[t.ActionId]) return null;
            const body = t.MergedParams?.Body;
            return (
              <div key={t.ActionId} className="p-5">
                <TabBodyMount body={body} row={row} onToast={onToast} />
              </div>
            );
          })}
        </div>

        {/* Footer with detail action id badge */}
        <div className="px-5 py-3 border-t flex items-center justify-between text-[11px]" style={{ borderColor: "var(--border)", background: "var(--surface-2)", color: "var(--muted)" }}>
          <span>actionId <span className="font-mono" style={{ color: "var(--ink-2)" }}>{detailActionId}</span> · tabId <span className="font-mono" style={{ color: "var(--ink-2)" }}>{activeTabId}</span></span>
          <span className="inline-flex items-center gap-1">
            <Icon name="info" size={10} /> Each tab fires its own API call only when opened
          </span>
        </div>
      </aside>
    </div>
  );
};

// Map body name → component
const TabBodyMount = ({ body, row, onToast }) => {
  if (body === "overview") return <OverviewTab row={row} />;
  if (body === "relatedIdeas") return <RelatedIdeasTab row={row} onToast={onToast} />;
  if (body === "conversations") return <ConversationsTab row={row} onToast={onToast} />;
  if (body === "activity") return <ActivityTab row={row} onToast={onToast} />;
  return <Empty icon="layers" title="No body for this tab" subtitle={`Body key: ${body}`} />;
};

// ---- Overview tab (synchronous; just shows row fields prettily) ----
const OverviewTab = ({ row }) => {
  if (!row) return null;
  return (
    <div className="space-y-5">
      <Section title="At a glance">
        <div className="grid grid-cols-2 gap-3">
          <Stat label="Problem" value={`#${row.IdeaNumber}`} mono />
          <Stat label="Team" value={row.TeamLabel} />
          <Stat label="Status" value={<EnumPill value={row.Recommendation_Value} />} raw />
          <Stat label="Priority" value={<EnumPill value={row.Priority} />} raw />
          <Stat label="Submitted by" value={row.SubmittedBy} />
          <Stat label="Submitted" value={fmtDate(row.SubmittedAt, "{0:MMM d, yyyy h:mm tt}")} />
        </div>
      </Section>
      <Section title="Description">
        <div className="text-[14px] leading-relaxed" style={{ color: "var(--ink-2)" }} dangerouslySetInnerHTML={{ __html: row.IdeaDescription }} />
      </Section>
      <Section title="Linked counts">
        <div className="flex items-center gap-3">
          <Counter label="Ideas" value={row.LinkedIdeas || 0} icon="sparkles" />
          <Counter label="Conversations" value={(PROBLEM_CONVERSATIONS[row.IdeaNumber] || []).length} icon="message" />
          <Counter label="Activity events" value={(PROBLEM_ACTIVITY[row.IdeaNumber] || []).length} icon="history" />
        </div>
      </Section>
    </div>
  );
};

const Section = ({ title, children }) => (
  <div>
    <div className="text-[10.5px] uppercase tracking-wider font-semibold mb-2" style={{ color: "var(--muted)" }}>{title}</div>
    {children}
  </div>
);

const Stat = ({ label, value, mono, raw }) => (
  <div className="rounded-lg p-3" style={{ background: "var(--surface-2)", border: "1px solid var(--border)" }}>
    <div className="text-[10.5px] uppercase tracking-wider font-semibold" style={{ color: "var(--muted)" }}>{label}</div>
    <div className="mt-1 text-[14px]" style={{ color: "var(--ink)", fontFamily: mono ? "JetBrains Mono, monospace" : undefined }}>
      {raw ? value : (value ?? "—")}
    </div>
  </div>
);

const Counter = ({ label, value, icon }) => (
  <div className="flex items-center gap-2 rounded-lg px-3 py-2" style={{ background: "var(--surface-2)", border: "1px solid var(--border)" }}>
    <Icon name={icon} size={14} style={{ color: "var(--primary)" }} />
    <div>
      <div className="text-[10.5px] uppercase tracking-wider font-semibold" style={{ color: "var(--muted)" }}>{label}</div>
      <div className="text-[16px] font-semibold tabular-nums" style={{ color: "var(--ink)", letterSpacing: "-0.01em" }}>{value}</div>
    </div>
  </div>
);

// ---- Related ideas tab (filters ideas by ParentId) ----
const RelatedIdeasTab = ({ row, onToast }) => {
  const [ideas, setIdeas] = useDT_S(null);
  useDT_E(() => {
    let cancelled = false;
    mockApi.listData(22, { page: 1, pageSize: 200, scopeKey: "ParentId", scopeValue: row.IdeaNumber })
      .then((d) => !cancelled && setIdeas(d.Items))
      .catch((e) => !cancelled && onToast?.({ kind: "err", text: e.message }));
    return () => { cancelled = true; };
  }, [row?.IdeaNumber]);
  if (!ideas) return <SkeletonList />;
  if (ideas.length === 0) return <Empty icon="zap" title="No ideas linked yet" subtitle="Linked ideas will appear here when proposed." />;
  return (
    <div className="space-y-2">
      {ideas.map((i) => (
        <div key={i.Id} className="card-flat p-3.5 flex items-start gap-3">
          <div className="h-7 w-7 inline-flex items-center justify-center rounded shrink-0" style={{ background: "var(--primary-bg)", color: "var(--primary)" }}>
            <Icon name="sparkles" size={13} />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>{i.Title}</div>
            <div className="text-[11.5px] mt-0.5 flex items-center gap-3 flex-wrap" style={{ color: "var(--muted)" }}>
              <span>{i.Owner}</span>
              <span>·</span>
              <span>Impact <span className="font-mono tabular-nums" style={{ color: "var(--ink-2)" }}>{i.Impact?.toFixed?.(1)}</span></span>
              <span>·</span>
              <span>Effort <span className="font-mono tabular-nums" style={{ color: "var(--ink-2)" }}>{i.Effort}</span></span>
              <span>·</span>
              <span>{fmtDate(i.CreatedAt, "{0:MMM d}")}</span>
            </div>
          </div>
          <EnumPill value={i.Status} />
        </div>
      ))}
    </div>
  );
};

// ---- Conversations tab (lazy fetches /api/data/conversations/{id}) ----
const ConversationsTab = ({ row, onToast }) => {
  const [items, setItems] = useDT_S(null);
  useDT_E(() => {
    let cancelled = false;
    mockApi.getProblemConversations(row.IdeaNumber).then((d) => !cancelled && setItems(d))
      .catch((e) => !cancelled && onToast?.({ kind: "err", text: e.message }));
    return () => { cancelled = true; };
  }, [row?.IdeaNumber]);
  if (!items) return <SkeletonList />;
  if (items.length === 0) return <Empty icon="message" title="No conversations" subtitle="No source chats linked to this problem yet." />;
  return (
    <div className="space-y-2">
      {items.map((c) => {
        const isCustomer = c.Speaker === "Customer";
        return (
          <div key={c.Id} className={`flex gap-2.5 ${isCustomer ? "" : "flex-row-reverse"}`}>
            <div className="h-7 w-7 inline-flex items-center justify-center rounded-full text-[10px] font-semibold text-white shrink-0" style={{ background: isCustomer ? "var(--accent)" : "var(--primary)" }}>
              {c.Speaker[0]}
            </div>
            <div className={`max-w-[80%]`}>
              <div className={`px-3 py-2 rounded-lg text-[13px] leading-snug`} style={{
                background: isCustomer ? "var(--surface-2)" : "var(--primary-bg)",
                color: "var(--ink-2)",
                border: "1px solid " + (isCustomer ? "var(--border)" : "var(--primary-ring)"),
              }}>
                {c.Snippet}
              </div>
              <div className={`text-[10.5px] mt-1 ${isCustomer ? "text-left" : "text-right"}`} style={{ color: "var(--subtle)" }}>
                {c.Speaker} · {fmtAgo(c.When)}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ---- Activity tab ----
const ActivityTab = ({ row, onToast }) => {
  const [items, setItems] = useDT_S(null);
  useDT_E(() => {
    let cancelled = false;
    mockApi.getProblemActivity(row.IdeaNumber).then((d) => !cancelled && setItems(d))
      .catch((e) => !cancelled && onToast?.({ kind: "err", text: e.message }));
    return () => { cancelled = true; };
  }, [row?.IdeaNumber]);
  if (!items) return <SkeletonList />;
  if (items.length === 0) return <Empty icon="history" title="No activity yet" />;
  const iconFor = (t) => t === "created" ? "plus" : t === "linked" ? "link" : t === "status" ? "checkCircle" : "info";
  return (
    <div className="space-y-2 relative">
      <div className="absolute top-2 bottom-2 left-3.5 w-px" style={{ background: "var(--border)" }} />
      {items.map((a) => (
        <div key={a.Id} className="flex gap-3 relative">
          <div className="h-7 w-7 inline-flex items-center justify-center rounded-full z-10 shrink-0 ring-4" style={{ background: "var(--surface)", color: "var(--primary)", boxShadow: "0 0 0 4px var(--surface)" }}>
            <span className="h-5 w-5 inline-flex items-center justify-center rounded-full" style={{ background: "var(--primary-bg)" }}>
              <Icon name={iconFor(a.Type)} size={11} />
            </span>
          </div>
          <div className="flex-1 min-w-0 pb-1">
            <div className="text-[13px]" style={{ color: "var(--ink-2)" }}>{a.Text}</div>
            <div className="text-[11px] mt-0.5" style={{ color: "var(--subtle)" }}>{a.Actor} · {fmtAgo(a.When)}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const SkeletonList = () => (
  <div className="space-y-2">
    <Skeleton className="h-14 w-full" />
    <Skeleton className="h-14 w-full" />
    <Skeleton className="h-14 w-4/5" />
  </div>
);

Object.assign(window, { DetailDrawer });