const { useState, useEffect, useCallback } = React;

// --- Design Tokens ---
const C = {
  bg:        "#08080f",
  bgCard:    "#0d0d1a",
  bgHover:   "#0f0f1e",
  bgInput:   "#050508",
  border:    "#1a1a28",
  borderLight: "#2a2a3a",
  text:      "#ddd8cc",
  textDim:   "#888",
  textMuted: "#7c7c8c",
  textFaint: "#555",
  accent:    "#4a9eff",
  green:     "#34d399",
  orange:    "#f59e0b",
  red:       "#e01e5a",
  purple:    "#a78bfa",
};

const font = { mono: "'DM Mono', 'Courier New', monospace", heading: "'Syne', sans-serif" };

// --- API ---
let onAuthFail = () => {};
let onServerError = () => {};

async function handleResponse(r) {
  if (r.status === 401) { onAuthFail(); throw new Error("Not authenticated"); }
  const data = await r.json();
  if (r.status === 500 && data.error_id) { onServerError(data); throw new Error(data.error); }
  return data;
}

const api = {
  get: (path) => fetch(`/api${path}`, { credentials: "same-origin" }).then(handleResponse),
  post: (path, body) => fetch(`/api${path}`, {
    method: "POST", credentials: "same-origin",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  }).then(handleResponse),
  patch: (path, body) => fetch(`/api${path}`, {
    method: "PATCH", credentials: "same-origin",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  }).then(handleResponse),
  del: (path) => fetch(`/api${path}`, {
    method: "DELETE", credentials: "same-origin",
  }).then(r => r.json()),
};

// --- Global refs (set by App, used by deep components) ---
let globalNav = () => {};
let globalEnvLookup = {}; // name -> id

// --- Components ---

function StatusBadge({ status }) {
  const colors = { open: C.orange, resolved: C.green, stale: C.textFaint };
  const color = colors[status] || C.textDim;
  return (
    <span style={{
      display: "inline-block", padding: "0.15rem 0.5rem", borderRadius: "3px",
      fontSize: "0.75rem", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase",
      background: color + "18", color: color, border: `1px solid ${color}33`,
    }}>{status}</span>
  );
}

function EnvBadge({ env, envId, clickable = true }) {
  if (!env) return null;
  const resolvedId = envId || globalEnvLookup[env];
  const handleClick = (e) => {
    if (!clickable || !resolvedId) return;
    e.stopPropagation();
    globalNav("env-show", resolvedId);
  };
  return (
    <span onClick={handleClick} style={{
      display: "inline-block", padding: "0.1rem 0.4rem", borderRadius: "3px",
      fontSize: "0.7rem", fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase",
      cursor: clickable ? "pointer" : "default",
      background: C.purple + "18", color: C.purple, border: `1px solid ${C.purple}33`,
    }}>{env}</span>
  );
}

function StatTile({ label, value, color, onClick, delta }) {
  const len = String(value).length;
  const sz = len > 10 ? "0.85rem" : len > 4 ? "1rem" : "1.25rem";
  const deltaNum = delta != null ? Number(delta) : null;
  const deltaStr = deltaNum != null && deltaNum !== 0
    ? (deltaNum > 0 ? `+${deltaNum.toLocaleString()}` : deltaNum.toLocaleString())
    : null;
  const deltaColor = deltaNum > 0 ? C.green : deltaNum < 0 ? C.red : C.textFaint;
  return (
    <div onClick={onClick} style={{
      background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
      padding: "0.6rem 0.7rem", minHeight: "3.8rem", display: "flex",
      flexDirection: "column", justifyContent: "space-between",
      cursor: onClick ? "pointer" : "default", transition: "border-color 0.15s",
    }}
    onMouseEnter={e => { if (onClick) e.currentTarget.style.borderColor = C.accent + "44"; }}
    onMouseLeave={e => { if (onClick) e.currentTarget.style.borderColor = C.border; }}>
      <div style={{ fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase",
        color: C.textMuted, fontWeight: 500, marginBottom: "0.3rem" }}>{label}</div>
      <div style={{ fontSize: sz, fontWeight: 500, color: color || C.text }}>{value}</div>
      {deltaStr && <div style={{ fontSize: "0.65rem", color: deltaColor, marginTop: "0.15rem" }}>{deltaStr}</div>}
    </div>
  );
}

function Btn({ children, onClick, variant = "primary", disabled, style: extra }) {
  const styles = {
    primary: { background: C.accent, color: "#000" },
    ghost: { background: "transparent", color: C.textDim, border: `1px solid ${C.borderLight}` },
    danger: { background: C.red, color: "#fff" },
    success: { background: C.green, color: "#000" },
  };
  return (
    <button disabled={disabled} onClick={onClick} style={{
      cursor: disabled ? "not-allowed" : "pointer", border: "none",
      fontFamily: font.mono, fontSize: "0.8rem", fontWeight: 500, letterSpacing: "0.06em",
      padding: "0.4rem 1rem", borderRadius: "4px",
      opacity: disabled ? 0.3 : 1, transition: "all 0.15s",
      ...styles[variant], ...extra,
    }}>{children}</button>
  );
}

function Input({ label, value, onChange, placeholder, type = "text", style: extra }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minWidth: 0 }}>
      {label && <label style={{ fontSize: "0.7rem", letterSpacing: "0.08em",
        textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>{label}</label>}
      <input type={type} value={value || ""} onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          background: C.bgInput, color: C.text, border: `1px solid ${C.border}`,
          borderRadius: "3px", padding: "0.5rem", fontFamily: font.mono,
          fontSize: "1rem", letterSpacing: "0.04em", outline: "none",
          width: "100%", boxSizing: "border-box",
          ...extra,
        }}
      />
    </div>
  );
}

function Select({ label, value, onChange, options, placeholder }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minWidth: 0 }}>
      {label && <label style={{ fontSize: "0.7rem", letterSpacing: "0.08em",
        textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>{label}</label>}
      <select value={value || ""} onChange={e => onChange(e.target.value)} style={{
        background: C.bgInput, color: C.text, border: `1px solid ${C.border}`,
        borderRadius: "3px", padding: "0.5rem", fontFamily: font.mono,
        fontSize: "1rem", letterSpacing: "0.04em", outline: "none",
        width: "100%", boxSizing: "border-box",
      }}>
        {placeholder && <option value="">{placeholder}</option>}
        {options.map(o => typeof o === "string"
          ? <option key={o} value={o}>{o}</option>
          : <option key={o.value} value={o.value}>{o.label}</option>
        )}
      </select>
    </div>
  );
}

// --- Pages ---

function Dashboard({ user, investigations, environments, onNav }) {
  const [tab, setTab] = useState("investigations");
  const open = investigations.filter(i => i.status === "open").length;
  const resolved = investigations.filter(i => i.status === "resolved").length;
  const recent = investigations.slice(0, 5);

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out" }}>
      <div style={{ marginBottom: "1.5rem" }}>
        <h1 style={{ fontFamily: font.heading, fontSize: "clamp(1.6rem, 3vw, 2.4rem)",
          fontWeight: 800, letterSpacing: "-0.01em", color: C.text }}>Watson</h1>
        <p style={{ fontSize: "0.8rem", color: C.textDim, marginTop: "0.3rem" }}>
          StoreConnect Investigation Platform
        </p>
      </div>

      {/* Dashboard tabs */}
      <div style={{ display: "flex", gap: "0.3rem", marginBottom: "1rem", borderBottom: `1px solid ${C.border}`, paddingBottom: "0.5rem" }}>
        {[{key: "investigations", label: "Investigations"}, {key: "environments", label: "Environments"}].map(t => (
          <Btn key={t.key} variant={tab === t.key ? "primary" : "ghost"} onClick={() => setTab(t.key)}
            style={{ fontSize: "0.8rem", padding: "0.4rem 0.8rem" }}>{t.label}</Btn>
        ))}
      </div>

      {tab === "investigations" && (<>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
          gap: "0.5rem", marginBottom: "1.5rem" }}>
          <StatTile label="Open" value={open} color={C.orange} onClick={() => onNav("list")} />
          <StatTile label="Resolved" value={resolved} color={C.green} onClick={() => onNav("list")} />
          <StatTile label="Total" value={investigations.length} onClick={() => onNav("list")} />
          <StatTile label="Environments" value={environments.length} color={C.purple} onClick={() => setTab("environments")} />
        </div>

        <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}>
          <Btn onClick={() => onNav("new")}>New Investigation</Btn>
          <Btn variant="ghost" onClick={() => onNav("list")}>All Investigations</Btn>
        </div>
      </>)}

      {tab === "environments" && (<>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
          <span style={{ fontSize: "0.8rem", color: C.textDim }}>{environments.length} environment(s)</span>
          <Btn onClick={() => onNav("env-new")} style={{ fontSize: "0.75rem" }}>Add Environment</Btn>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          {environments.map(env => (
            <div key={env.id} onClick={() => onNav("env-show", env.id)}
              style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
                padding: "0.7rem", cursor: "pointer", transition: "border-color 0.15s" }}
              onMouseEnter={e => e.currentTarget.style.borderColor = C.accent + "44"}
              onMouseLeave={e => e.currentTarget.style.borderColor = C.border}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.3rem" }}>
                <span style={{ fontSize: "0.9rem", fontWeight: 500 }}>{env.name}</span>
                <EnvBadge env={env.name} />
              </div>
              <div style={{ fontSize: "0.75rem", color: C.textFaint, fontFamily: font.mono }}>
                App: {env.rails_app || env.db_app} &middot; DB: {env.db_app}
              </div>
              {env.org_id && <div style={{ fontSize: "0.7rem", color: C.textFaint }}>Org: {env.org_id}</div>}
            </div>
          ))}
        </div>
      </>)}

      {recent.length > 0 && (
        <div>
          <div style={{ fontSize: "0.75rem", letterSpacing: "0.12em", textTransform: "uppercase",
            color: C.textMuted, fontWeight: 500, marginBottom: "0.5rem" }}>Recent</div>
          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
            {recent.map((inv) => (
              <div key={inv.id} onClick={() => onNav("show", inv.id)}
                style={{
                  padding: "0.7rem", cursor: "pointer",
                  background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
                  transition: "border-color 0.15s",
                }}
                onMouseEnter={e => e.currentTarget.style.borderColor = C.accent + "44"}
                onMouseLeave={e => e.currentTarget.style.borderColor = C.border}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.3rem" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
                    <EnvBadge env={inv.environment} />
                    <StatusBadge status={inv.status} />
                  </div>
                  <span style={{ fontSize: "0.7rem", color: C.textFaint }}>{timeAgo(inv.updated_at)}</span>
                </div>
                <div style={{ fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.2rem" }}>{inv.title}</div>
                <div style={{ fontSize: "0.7rem", color: C.textFaint }}>
                  {inv.entity_type} {inv.entity_id?.slice(0, 8)}
                  {inv.case_number && <>{" "}&middot; {inv.case_number}</>}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function InvestigationList({ investigations, onNav }) {
  const [filter, setFilter] = useState("all");
  const filtered = filter === "all" ? investigations : investigations.filter(i => i.status === filter);

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
        <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700 }}>Investigations</h2>
        <Btn onClick={() => onNav("new")}>New</Btn>
      </div>

      <div style={{ display: "flex", gap: "0.3rem", marginBottom: "1rem" }}>
        {["all", "open", "resolved", "stale"].map(s => (
          <Btn key={s} variant={filter === s ? "primary" : "ghost"} onClick={() => setFilter(s)}
            style={{ fontSize: "0.75rem", padding: "0.3rem 0.6rem" }}>
            {s.charAt(0).toUpperCase() + s.slice(1)}
          </Btn>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
        {filtered.length === 0 && (
          <div style={{ padding: "2rem", textAlign: "center", color: C.textFaint, fontSize: "0.85rem",
            background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px" }}>
            No investigations found.
          </div>
        )}
        {filtered.map((inv) => (
          <div key={inv.id} onClick={() => onNav("show", inv.id)}
            style={{
              padding: "0.7rem", cursor: "pointer",
              background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
              transition: "border-color 0.15s",
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = C.accent + "44"}
            onMouseLeave={e => e.currentTarget.style.borderColor = C.border}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.3rem" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", flexWrap: "wrap" }}>
                <EnvBadge env={inv.environment} />
                <StatusBadge status={inv.status} />
                {inv.case_number && <span style={{ fontSize: "0.7rem", color: C.accent }}>{inv.case_number}</span>}
              </div>
              <span style={{ fontSize: "0.7rem", color: C.textFaint, flexShrink: 0 }}>{timeAgo(inv.updated_at)}</span>
            </div>
            <div style={{ fontSize: "0.9rem", fontWeight: 400, marginBottom: "0.2rem" }}>{inv.title}</div>
            <div style={{ fontSize: "0.75rem", color: C.textFaint }}>
              {inv.entity_type} {inv.entity_id?.slice(0, 8)}
              {inv.user && <>{" "}&middot; {inv.user.name}</>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function InvestigationShow({ id, onNav, environments }) {
  const [inv, setInv] = useState(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [editForm, setEditForm] = useState({});
  const [chatMsg, setChatMsg] = useState("");
  const [chatLoading, setChatLoading] = useState(false);
  const [toolPanel, setToolPanel] = useState(null); // "lookup"|"audit"|"timeline"|"shipments"
  const [toolForm, setToolForm] = useState({});
  const [toolLoading, setToolLoading] = useState(false);
  const [connectCase, setConnectCase] = useState(false);
  const [caseInput, setCaseInput] = useState("");
  const [connectLoading, setConnectLoading] = useState(false);
  const [bugForm, setBugForm] = useState(null); // null = hidden
  const [bugLoading, setBugLoading] = useState(false);

  const reload = () => api.get(`/investigations/${id}`).then(setInv);

  useEffect(() => {
    setLoading(true);
    reload().then(() => setLoading(false));
  }, [id]);

  const saveEdit = async () => {
    await api.patch(`/investigations/${id}`, editForm);
    setEditing(false);
    reload();
  };

  const startEdit = () => {
    setEditForm({ status: inv.status, findings: inv.findings || "", resolution: inv.resolution || "",
      case_number: inv.case_number || "", case_url: inv.case_url || "", description: inv.description || "" });
    setEditing(true);
  };

  const [chatError, setChatError] = useState(null);

  const sendChat = async () => {
    if (!chatMsg.trim()) return;
    const msg = chatMsg; setChatMsg(""); setChatLoading(true); setChatError(null);
    try {
      const result = await api.post(`/investigations/${id}/chat_sync`, { message: msg });
      if (result.error) { setChatError(result.error); }
      else { reload(); }
    } catch (e) {
      setChatError(e.message || "Failed to send message");
    }
    setChatLoading(false);
  };

  const runTool = async () => {
    setToolLoading(true);
    try {
      await api.post(`/investigations/${id}/run_tool`, { tool: toolPanel, tool_params: toolForm });
      reload();
      setToolPanel(null); setToolForm({});
    } catch (e) { /* ignore */ }
    setToolLoading(false);
  };

  const doConnectCase = async () => {
    if (!caseInput.trim()) return;
    setConnectLoading(true);
    try {
      const result = await api.post(`/investigations/${id}/connect_case`, { platform: "salesforce", case_number: caseInput });
      if (result.errors) { alert(result.errors.join(", ")); }
      else { setInv(result); setConnectCase(false); setCaseInput(""); }
    } catch (e) { /* ignore */ }
    setConnectLoading(false);
  };

  const logBug = async () => {
    if (!bugForm?.title?.trim()) return;
    setBugLoading(true);
    try {
      const result = await api.post(`/investigations/${id}/log_bug`, bugForm);
      if (result.error) { alert(result.error); }
      else { setBugForm(null); reload(); }
    } catch (e) { /* ignore */ }
    setBugLoading(false);
  };

  if (loading) return <div style={{ color: C.textDim, padding: "2rem" }}>Loading...</div>;
  if (!inv) return <div style={{ color: C.red, padding: "2rem" }}>Not found</div>;

  const chatEntries = (inv.entries || []).filter(e => e.entry_type === "chat_message");
  const otherEntries = (inv.entries || []).filter(e => e.entry_type !== "chat_message");

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "1rem" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.3rem" }}>
            <EnvBadge env={inv.environment} />
            <StatusBadge status={inv.status} />
          </div>
          <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700 }}>{inv.title}</h2>
          <p style={{ fontSize: "0.75rem", color: C.textDim, marginTop: "0.2rem" }}>
            {inv.case_number && (
              <>{inv.case_url
                ? <a href={inv.case_url} target="_blank" rel="noopener" style={{ color: C.accent }}>{inv.case_number}</a>
                : <span>{inv.case_number}</span>
              }{" "}&middot;{" "}</>
            )}
            {inv.entity_type} {inv.entity_id} &middot; by {inv.user?.name} &middot; {timeAgo(inv.created_at)}
          </p>
        </div>
        <div style={{ display: "flex", gap: "0.3rem" }}>
          <Btn variant="ghost" onClick={editing ? () => setEditing(false) : startEdit}>
            {editing ? "Cancel" : "Edit"}
          </Btn>
          <Btn variant="ghost" onClick={() => onNav("list")}>Back</Btn>
        </div>
      </div>

      {editing && (
        <Card>
          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
            <Select label="Status" value={editForm.status} onChange={v => setEditForm({...editForm, status: v})}
              options={[{value:"open",label:"Open"},{value:"resolved",label:"Resolved"},{value:"stale",label:"Stale"}]} />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
              <Input label="Case #" value={editForm.case_number} onChange={v => setEditForm({...editForm, case_number: v})} placeholder="WEB-8502" />
              <Input label="Case URL" value={editForm.case_url} onChange={v => setEditForm({...editForm, case_url: v})} placeholder="https://..." />
            </div>
            <div>
              <label style={{ fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>Description</label>
              <textarea value={editForm.description} onChange={e => setEditForm({...editForm, description: e.target.value})}
                rows={3} style={{ display: "block", width: "100%", marginTop: "0.25rem", background: C.bgInput, color: C.text, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.3rem 0.5rem", fontFamily: font.mono, fontSize: "0.8rem", resize: "vertical" }} />
            </div>
            <div>
              <label style={{ fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>Findings</label>
              <textarea value={editForm.findings} onChange={e => setEditForm({...editForm, findings: e.target.value})}
                rows={4} style={{ display: "block", width: "100%", marginTop: "0.25rem", background: C.bgInput, color: C.text, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.3rem 0.5rem", fontFamily: font.mono, fontSize: "0.8rem", resize: "vertical" }} />
            </div>
            <div>
              <label style={{ fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>Resolution</label>
              <textarea value={editForm.resolution} onChange={e => setEditForm({...editForm, resolution: e.target.value})}
                rows={3} style={{ display: "block", width: "100%", marginTop: "0.25rem", background: C.bgInput, color: C.text, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.3rem 0.5rem", fontFamily: font.mono, fontSize: "0.8rem", resize: "vertical" }} />
            </div>
            <Btn onClick={saveEdit}>Save</Btn>
          </div>
        </Card>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))", gap: "0.5rem", marginBottom: "1rem" }}>
        <StatTile label="Status" value={inv.status} color={inv.status === "open" ? C.orange : C.green} />
        <StatTile label="Environment" value={inv.environment || "default"} color={C.purple} />
        <StatTile label="Case" value={inv.case_number || "none"} color={inv.case_number ? C.accent : C.textFaint} />
        <StatTile label="Entries" value={(inv.entries || []).length} />
      </div>

      {/* Connect Case */}
      {!inv.case_number && !connectCase && (
        <div style={{ marginBottom: "0.8rem" }}>
          <Btn variant="ghost" onClick={() => setConnectCase(true)} style={{ fontSize: "0.7rem" }}>Connect Case</Btn>
        </div>
      )}
      {connectCase && (
        <Card>
          <SectionLabel>Connect Salesforce Case</SectionLabel>
          <div style={{ display: "flex", gap: "0.3rem", alignItems: "flex-end" }}>
            <Input label="Ticket Code" value={caseInput} onChange={setCaseInput} placeholder="WEB-8502 or POS-1234" style={{ flex: 1 }} />
            <Btn onClick={doConnectCase} disabled={connectLoading}>{connectLoading ? "..." : "Connect"}</Btn>
            <Btn variant="ghost" onClick={() => setConnectCase(false)}>Cancel</Btn>
          </div>
          <p style={{ fontSize: "0.5rem", color: C.textFaint, marginTop: "0.3rem" }}>
            Pulls ticket description into investigation context.
          </p>
        </Card>
      )}

      {/* Description */}
      {inv.description && (
        <Card>
          <SectionLabel>Description</SectionLabel>
          <div style={{ fontSize: "0.8rem", whiteSpace: "pre-wrap", lineHeight: 1.6 }}>{inv.description}</div>
        </Card>
      )}

      {/* Run Tool inline */}
      <Card>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: toolPanel ? "0.5rem" : 0 }}>
          <SectionLabel>Run Tool</SectionLabel>
          <div style={{ display: "flex", gap: "0.3rem" }}>
            {["lookup","audit","timeline","shipments"].map(t => (
              <Btn key={t} variant={toolPanel === t ? "primary" : "ghost"} onClick={() => { setToolPanel(toolPanel === t ? null : t); setToolForm({}); }}
                style={{ fontSize: "0.75rem", padding: "0.35rem 0.6rem" }}>{t}</Btn>
            ))}
          </div>
        </div>
        {toolPanel === "lookup" && (
          <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", alignItems: "flex-end" }}>
            <Select label="Table" value={toolForm.table || ""} onChange={v => setToolForm({...toolForm, table: v})}
              options={["order","order_item","payment","payment_item","cart","cart_item","cart_item_tax","contact","shipment","cart_fulfillment","cart_fulfillment_item","fulfillment_item","line_item","register_shift","payment_gateway_txn"]} placeholder="Select table" />
            <Input label="SC_ID" value={toolForm.sc_id || ""} onChange={v => setToolForm({...toolForm, sc_id: v})} placeholder="abc123..." />
            <Input label="Ref" value={toolForm.ref || ""} onChange={v => setToolForm({...toolForm, ref: v})} placeholder="AMRT..." />
            <Btn onClick={runTool} disabled={toolLoading}>{toolLoading ? "..." : "Run"}</Btn>
          </div>
        )}
        {toolPanel === "audit" && (
          <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", alignItems: "flex-end" }}>
            <Input label="Payment SC_ID" value={toolForm.payment_sc_id || ""} onChange={v => setToolForm({...toolForm, payment_sc_id: v})} />
            <Input label="Order SC_ID" value={toolForm.order_sc_id || ""} onChange={v => setToolForm({...toolForm, order_sc_id: v})} />
            <Input label="From" type="date" value={toolForm.from || ""} onChange={v => setToolForm({...toolForm, from: v})} />
            <Btn onClick={runTool} disabled={toolLoading}>{toolLoading ? "..." : "Run"}</Btn>
          </div>
        )}
        {toolPanel === "timeline" && (
          <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", alignItems: "flex-end" }}>
            <Select label="Table" value={toolForm.table || ""} onChange={v => setToolForm({...toolForm, table: v})}
              options={["order","order_item","payment","payment_item","cart","cart_item","contact","shipment","cart_fulfillment"]} placeholder="Auto (order/cart)" />
            <Input label="SC_ID" value={toolForm.sc_id || ""} onChange={v => setToolForm({...toolForm, sc_id: v})} placeholder="sc_id..." />
            <Input label="From" type="date" value={toolForm.from || ""} onChange={v => setToolForm({...toolForm, from: v})} />
            <Input label="To" type="date" value={toolForm.to || ""} onChange={v => setToolForm({...toolForm, to: v})} />
            <Btn onClick={runTool} disabled={toolLoading}>{toolLoading ? "..." : "Run"}</Btn>
          </div>
        )}
        {toolPanel === "shipments" && (
          <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", alignItems: "flex-end" }}>
            <Input label="Order SC_ID" value={toolForm.order_sc_id || ""} onChange={v => setToolForm({...toolForm, order_sc_id: v})} />
            <Btn onClick={runTool} disabled={toolLoading}>{toolLoading ? "..." : "Run"}</Btn>
          </div>
        )}
      </Card>

      {/* Actions: Log Bug */}
      <Card>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: bugForm ? "0.5rem" : 0 }}>
          <SectionLabel>Actions</SectionLabel>
          <div style={{ display: "flex", gap: "0.3rem" }}>
            <Btn variant={bugForm ? "primary" : "ghost"} onClick={() => setBugForm(bugForm ? null : { title: inv.title || "", product: "POS", description: inv.findings || inv.description || "", create_ticket: true })}
              style={{ fontSize: "0.75rem", padding: "0.35rem 0.6rem" }}>Log Bug</Btn>
          </div>
        </div>
        {bugForm && (
          <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
            <Input label="Bug Title" value={bugForm.title} onChange={v => setBugForm({...bugForm, title: v})} />
            <Select label="Product" value={bugForm.product} onChange={v => setBugForm({...bugForm, product: v})}
              options={["POS","eCommerce","Package","Systems","Portal"]} />
            <div>
              <label style={{ fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>Description</label>
              <textarea value={bugForm.description} onChange={e => setBugForm({...bugForm, description: e.target.value})}
                rows={3} style={{ display: "block", width: "100%", marginTop: "0.25rem", background: C.bgInput, color: C.text, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.3rem 0.5rem", fontFamily: font.mono, fontSize: "0.7rem", resize: "vertical" }} />
            </div>
            <label style={{ fontSize: "0.75rem", color: C.textDim, display: "flex", alignItems: "center", gap: "0.3rem" }}>
              <input type="checkbox" checked={bugForm.create_ticket} onChange={e => setBugForm({...bugForm, create_ticket: e.target.checked})} style={{ accentColor: C.accent }} /> Also create linked Ticket
            </label>
            <Btn onClick={logBug} disabled={bugLoading}>{bugLoading ? "Filing..." : "File Bug in Salesforce"}</Btn>
          </div>
        )}
      </Card>

      {/* App Instance */}
      {(inv.db_app || inv.rails_app || inv.org_id) && (
        <Card>
          <SectionLabel>App Instance</SectionLabel>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.1rem 0.6rem", fontSize: "0.8rem" }}>
            {inv.db_app && <><dt style={{ color: C.textMuted }}>DB App</dt><dd style={{ fontFamily: font.mono }}>{inv.db_app}</dd></>}
            {inv.rails_app && <><dt style={{ color: C.textMuted }}>Rails App</dt><dd style={{ fontFamily: font.mono }}>{inv.rails_app}</dd></>}
            {inv.org_id && <><dt style={{ color: C.textMuted }}>Org ID</dt><dd style={{ fontFamily: font.mono }}>{inv.org_id}</dd></>}
          </div>
        </Card>
      )}

      <ShareUrl url={`${window.location.origin}/i/${inv.shareable_token}`} />

      {inv.findings && (
        <div style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
          padding: "0.7rem", marginBottom: "0.8rem" }}>
          <div style={{ fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase",
            color: C.textMuted, fontWeight: 500, marginBottom: "0.4rem" }}>Findings</div>
          <div style={{ fontSize: "0.7rem", whiteSpace: "pre-wrap", lineHeight: 1.6 }}>{inv.findings}</div>
        </div>
      )}

      {inv.resolution && (
        <div style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
          padding: "0.7rem", marginBottom: "0.8rem" }}>
          <div style={{ fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase",
            color: C.textMuted, fontWeight: 500, marginBottom: "0.4rem" }}>Resolution</div>
          <div style={{ fontSize: "0.7rem", whiteSpace: "pre-wrap", lineHeight: 1.6 }}>{inv.resolution}</div>
        </div>
      )}

      {otherEntries.length > 0 && (() => {
        const latest = otherEntries[otherEntries.length - 1];
        const history = otherEntries.slice(0, -1).reverse();
        return (<>
          {/* Latest entry — always expanded */}
          <Card>
            <SectionLabel>Latest: {latest.entry_type}</SectionLabel>
            <div style={{ fontSize: "0.7rem", color: C.textFaint, marginBottom: "0.4rem" }}>
              {latest.actor} &middot; {new Date(latest.created_at).toLocaleString()}
            </div>
            <ToolResultView entry={latest} />
          </Card>

          {/* History — collapsed by default */}
          {history.length > 0 && (
            <details style={{ marginBottom: "0.8rem" }}>
              <summary style={{
                fontSize: "0.8rem", color: C.textMuted, cursor: "pointer", padding: "0.5rem 0.7rem",
                background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
                listStyle: "none", display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <span>History ({history.length} entries)</span>
                <span style={{ fontSize: "0.7rem", color: C.textFaint }}>tap to expand</span>
              </summary>
              <div style={{ marginTop: "0.4rem", display: "flex", flexDirection: "column", gap: "0.4rem" }}>
                {history.map(e => (
                  <details key={e.id}>
                    <summary style={{
                      fontSize: "0.75rem", color: C.textDim, cursor: "pointer", padding: "0.4rem 0.6rem",
                      background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "4px",
                      listStyle: "none", display: "flex", justifyContent: "space-between",
                    }}>
                      <span><span style={{ color: C.textMuted }}>{e.entry_type}</span> &middot; {e.actor}</span>
                      <span style={{ fontSize: "0.7rem", color: C.textFaint }}>{timeAgo(e.created_at)}</span>
                    </summary>
                    <div style={{ padding: "0.5rem", background: C.bgCard, border: `1px solid ${C.border}`,
                      borderTop: "none", borderRadius: "0 0 4px 4px" }}>
                      <ToolResultView entry={e} />
                    </div>
                  </details>
                ))}
              </div>
            </details>
          )}
        </>);
      })()}

      <ChatPanel chatEntries={chatEntries} chatMsg={chatMsg} setChatMsg={setChatMsg}
        chatLoading={chatLoading} chatError={chatError} sendChat={sendChat} />
    </div>
  );
}

const POLICY_STYLE = {
  gated_open:   { label: "Open",    color: C.green,     hint: "Client-gated" },
  gated_closed: { label: "Closed",  color: C.red,       hint: "Client-gated" },
  legacy:       { label: "Legacy",  color: C.orange,    hint: "Not client-gated" },
  unknown:      { label: "Unknown", color: C.textFaint, hint: "Could not check" },
};

function PolicyBadge({ policy }) {
  const st = POLICY_STYLE[policy] || POLICY_STYLE.unknown;
  return (
    <span title={st.hint} style={{
      display: "inline-block", padding: "0.15rem 0.5rem", borderRadius: "3px",
      fontSize: "0.7rem", fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase",
      background: st.color + "18", color: st.color, border: `1px solid ${st.color}33`,
    }}>{st.label}</span>
  );
}

const fmtWhen = (iso) => iso ? iso.replace("T", " ").replace(/:\d\d(\.\d+)?Z$/, " UTC") : "-";

// One-line notice that a tool result was read under a given support-access
// policy. Shown wherever tenant logs are rendered so a legacy read is never silent.
function AccessNotice({ access }) {
  if (!access) return null;
  const st = POLICY_STYLE[access.policy] || POLICY_STYLE.unknown;
  return (
    <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", fontSize: "0.75rem", color: C.textDim,
      background: st.color + "0c", border: `1px solid ${st.color}22`, borderRadius: "5px", padding: "0.4rem 0.6rem", marginBottom: "0.8rem" }}>
      <PolicyBadge policy={access.policy} />
      <span>{access.logs_note || access.reason}</span>
    </div>
  );
}

// Support-access panel for an environment: package version, gem version, the
// client's login-access grant window and the resulting policy for logs and DB.
function SupportAccessCard({ envId }) {
  const [access, setAccess] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const load = (refresh) => {
    setLoading(true); setError(null);
    api.get(`/environments/${envId}/support_access${refresh ? "?refresh=1" : ""}`)
      .then(data => { if (data.error) setError(data.error); else setAccess(data); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  };
  useEffect(() => { load(false); }, [envId]);

  return (
    <Card>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
        <SectionLabel>Support Access</SectionLabel>
        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
          {access && <PolicyBadge policy={access.policy} />}
          <Btn variant="ghost" onClick={() => load(true)} disabled={loading} style={{ fontSize: "0.7rem", padding: "0.2rem 0.5rem" }}>
            {loading ? "Checking..." : "Refresh"}
          </Btn>
        </div>
      </div>
      {error && <ErrorBox error={error} />}
      {access && (<>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.2rem 0.8rem", fontSize: "0.8rem", marginBottom: "0.5rem" }}>
          <span style={{ color: C.textMuted }}>License</span>
          <span style={{ fontFamily: font.mono }}>{access.license_name || "-"}{access.subscriber_org_name ? ` · ${access.subscriber_org_name}` : ""}</span>
          <span style={{ color: C.textMuted }}>Package</span>
          <span style={{ fontFamily: font.mono }}>
            {access.package_version || "-"}{access.package_version_name ? ` (${access.package_version_name})` : ""}
            {access.package_updated_at ? <span style={{ color: C.textFaint }}> · updated {fmtWhen(access.package_updated_at)}</span> : null}
            {!access.grant_capable && access.package_version ? <span style={{ color: C.orange }}> · below {access.min_grant_package_version}</span> : null}
          </span>
          <span style={{ color: C.textMuted }}>Gem</span><span style={{ fontFamily: font.mono }}>{access.gem_version || "-"}</span>
          <span style={{ color: C.textMuted }}>Grant</span>
          <span style={{ fontFamily: font.mono }}>
            {!access.grant_fields_available ? <span style={{ color: C.textFaint }}>License grant fields not installed yet (SYS-10070)</span>
              : access.granted_to ? `${fmtWhen(access.granted_from)} → ${fmtWhen(access.granted_to)}`
              : <span style={{ color: C.textFaint }}>none live</span>}
          </span>
        </div>
        <p style={{ fontSize: "0.8rem", color: C.textDim, marginBottom: "0.4rem" }}>{access.reason}</p>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.2rem 0.8rem", fontSize: "0.75rem", color: C.textFaint }}>
          <span>Logs</span><span>{access.logs_note}</span>
          <span>Database</span><span>{access.db_note}</span>
        </div>
        {access.error && <p style={{ fontSize: "0.7rem", color: C.red, marginTop: "0.4rem" }}>{access.error}</p>}
      </>)}
    </Card>
  );
}

function EnvironmentDetail({ id, onNav, onUpdated }) {
  const cacheKey = `watson_telemetry_v2_${id}`;
  const cached = (() => { try { return JSON.parse(localStorage.getItem(cacheKey)); } catch { return null; } })();

  const [env, setEnv] = useState(null);
  const [telemetry, setTelemetry] = useState(cached?.data || null);
  const [loading, setLoading] = useState(true);
  const [tLoading, setTLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [editForm, setEditForm] = useState({});
  const [hcAction, setHcAction] = useState(null);

  const [prevTelemetry, setPrevTelemetry] = useState(null);
  const telemetryRef = React.useRef(cached?.data || null);

  const loadEnv = () => api.get(`/environments/${id}`).then(setEnv);
  const loadTelemetry = () => {
    setTLoading(true);
    api.get(`/environments/${id}/telemetry`).then(data => {
      if (telemetryRef.current) setPrevTelemetry(telemetryRef.current);
      telemetryRef.current = data;
      setTelemetry(data);
      setTLoading(false);
      // Cache to localStorage
      try { localStorage.setItem(cacheKey, JSON.stringify({ data, cachedAt: new Date().toISOString() })); } catch {}
    }).catch(() => setTLoading(false));
  };

  useEffect(() => { loadEnv().then(() => setLoading(false)); loadTelemetry(); }, [id]);

  // Auto-refresh every 30s
  useEffect(() => {
    const timer = setInterval(loadTelemetry, 30000);
    return () => clearInterval(timer);
  }, [id]);

  const saveEdit = async () => {
    await api.patch(`/environments/${id}`, editForm);
    setEditing(false); loadEnv(); onUpdated();
  };

  const doHcAction = async (action) => {
    setHcAction(action);
    await api.post(`/environments/${id}/hc_${action}`, {});
    setHcAction(null); loadTelemetry();
  };

  if (loading) return <div style={{ color: C.textDim, padding: "2rem" }}>Loading...</div>;
  if (!env) return <div style={{ color: C.red, padding: "2rem" }}>Not found</div>;

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "1rem" }}>
        <div>
          <EnvBadge env={env.name} />
          <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700, marginTop: "0.3rem" }}>{env.name}</h2>
        </div>
        <div style={{ display: "flex", gap: "0.3rem" }}>
          <Btn variant="ghost" onClick={() => { setEditForm(env); setEditing(!editing); }}>{editing ? "Cancel" : "Edit"}</Btn>
          <Btn variant="ghost" onClick={() => onNav("dashboard")}>Back</Btn>
        </div>
      </div>

      {editing && (
        <Card>
          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
            <Input label="Name / Alias" value={editForm.name} onChange={v => setEditForm({...editForm, name: v})} />
            <Input label="Rails App" value={editForm.rails_app || ""} onChange={v => setEditForm({...editForm, rails_app: v})} placeholder="m-f-3c62d74e-v21" />
            <Input label="Database App" value={editForm.db_app || ""} onChange={v => setEditForm({...editForm, db_app: v})} placeholder="m-f-3c62d74e" />
            <Input label="Tenant Org ID" value={editForm.org_id || ""} onChange={v => setEditForm({...editForm, org_id: v})} placeholder="00d5i000007ezuheag" />
            <Btn onClick={saveEdit}>Save</Btn>
          </div>
        </Card>
      )}

      {/* Config */}
      <Card>
        <SectionLabel>Configuration</SectionLabel>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.2rem 0.8rem", fontSize: "0.8rem" }}>
          <span style={{ color: C.textMuted }}>App</span><span style={{ fontFamily: font.mono }}>{env.rails_app || "-"}</span>
          <span style={{ color: C.textMuted }}>Database</span><span style={{ fontFamily: font.mono }}>{env.db_app}</span>
          <span style={{ color: C.textMuted }}>Org ID</span><span style={{ fontFamily: font.mono }}>{env.org_id || "-"}</span>
          {env.schema && <><span style={{ color: C.textMuted }}>Schema</span><span style={{ fontFamily: font.mono, fontSize: "0.7rem" }}>{env.schema}</span></>}
        </div>
      </Card>

      {/* Support access: package version, grant window, policy */}
      <SupportAccessCard envId={id} />

      {/* Telemetry */}
      <Card>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
          <SectionLabel>Telemetry</SectionLabel>
          <Btn variant="ghost" onClick={loadTelemetry} disabled={tLoading} style={{ fontSize: "0.7rem", padding: "0.2rem 0.5rem" }}>
            {tLoading ? "Loading..." : "Refresh"}
          </Btn>
        </div>

        {!telemetry && tLoading && <div style={{ color: C.textDim, fontSize: "0.8rem" }}>Loading telemetry...</div>}

        {telemetry && (<>
          {/* Refresh timestamp */}
          {(() => {
            const refreshedAt = telemetry.refreshed_at ? new Date(telemetry.refreshed_at) : null;
            const ageMs = refreshedAt ? Date.now() - refreshedAt.getTime() : Infinity;
            const isStale = ageMs > 3 * 60 * 1000; // >3 minutes
            return (
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem", flexWrap: "wrap", gap: "0.3rem" }}>
                <span style={{ fontSize: "0.7rem", color: C.textFaint, display: "flex", alignItems: "center", gap: "0.4rem" }}>
                  Last refreshed: {refreshedAt ? refreshedAt.toLocaleTimeString() : "—"}
                  {tLoading && <span style={{ color: C.accent }}>(refreshing...)</span>}
                  {isStale && !tLoading && (
                    <span style={{ fontSize: "0.6rem", padding: "0.1rem 0.35rem", borderRadius: "3px",
                      background: C.orange + "20", color: C.orange, fontWeight: 500, letterSpacing: "0.06em",
                      textTransform: "uppercase" }}>stale</span>
                  )}
                </span>
                <span style={{ fontSize: "0.65rem", color: C.textFaint }}>auto-refresh 30s</span>
              </div>
            );
          })()}

          {(() => {
            const hc = telemetry.hc_status || "";
            const hcLabel = hc.includes("POLLING") ? "Polling" : hc.includes("IDLE") ? "Idle" : hc.includes("PAUSED") ? "Paused" : hc.includes("Error") ? "Error" : "Active";
            const hcColor = hc.includes("POLLING") || hc.includes("IDLE") ? C.green : hc.includes("PAUSED") ? C.orange : C.red;
            const d = (key) => prevTelemetry ? (telemetry[key] ?? 0) - (prevTelemetry[key] ?? 0) : null;
            const ce = telemetry.change_events || {};
            const pce = prevTelemetry?.change_events || {};
            const ced = (k) => prevTelemetry?.change_events ? (ce[k] ?? 0) - (pce[k] ?? 0) : null;
            return (<>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))", gap: "0.5rem", marginBottom: "0.5rem" }}>
                <StatTile label="HC Status" value={hcLabel} color={hcColor} />
                <StatTile label="CE Total" value={(ce.total ?? 0).toLocaleString()} color={C.accent} delta={ced("total")} />
                <StatTile label="Unprocessed" value={(ce.unprocessed ?? 0).toLocaleString()}
                  color={(ce.unprocessed ?? 0) > 1000 ? C.red : (ce.unprocessed ?? 0) > 100 ? C.orange : C.green} delta={ced("unprocessed")} />
                <StatTile label="Pending Archive" value={(ce.processed_pending_archive ?? 0).toLocaleString()}
                  color={(ce.processed_pending_archive ?? 0) > 10000 ? C.orange : C.green} delta={ced("processed_pending_archive")} />
                <StatTile label="Pending Deletes" value={(ce.pending_deletes ?? 0).toLocaleString()}
                  color={(ce.pending_deletes ?? 0) > 100 ? C.orange : C.textDim} delta={ced("pending_deletes")} />
                <StatTile label="CE Failed" value={(ce.failed ?? 0).toLocaleString()} color={(ce.failed ?? 0) > 0 ? C.red : C.green} delta={ced("failed")} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))", gap: "0.5rem", marginBottom: "0.8rem" }}>
                <StatTile label="Upstream Queue" value={String(telemetry.upstream_backlog ?? 0)} color={telemetry.upstream_backlog > 0 ? C.orange : C.green} delta={d("upstream_backlog")} />
                <StatTile label="Upstream /hr" value={String(telemetry.upstream_recent ?? 0)} color={C.accent} delta={d("upstream_recent")} />
                <StatTile label="Downstream /hr" value={String(telemetry.downstream_recent ?? 0)} color={C.accent} delta={d("downstream_recent")} />
                <StatTile label="Downstream Queue" value={String(telemetry.downstream_queue ?? 0)} color={telemetry.downstream_queue > 10 ? C.orange : C.green} delta={d("downstream_queue")} />
                <StatTile label="Archived" value={(telemetry.change_events_archive?.total ?? 0).toLocaleString()} color={C.textDim}
                  delta={prevTelemetry?.change_events_archive ? (telemetry.change_events_archive?.total ?? 0) - (prevTelemetry.change_events_archive?.total ?? 0) : null} />
                <StatTile label="TL Failed" value={String(telemetry.failed_events ?? 0)} color={telemetry.failed_events > 0 ? C.red : C.green} delta={d("failed_events")} />
                <StatTile label="Missing SFIDs" value={String(telemetry.missing_sfids ?? 0)} color={telemetry.missing_sfids > 0 ? C.orange : C.green} delta={d("missing_sfids")} />
                <StatTile label="Investigations" value={String(telemetry.open_investigations ?? 0)} color={telemetry.open_investigations > 0 ? C.orange : C.textDim} />
              </div>
            </>);
          })()}

          {/* HC Actions */}
          <div style={{ display: "flex", gap: "0.3rem", marginBottom: "0.5rem" }}>
            <Btn variant="ghost" onClick={() => doHcAction("pause")} disabled={!!hcAction}
              style={{ fontSize: "0.75rem", color: C.orange }}>{hcAction === "pause" ? "Pausing..." : "Pause HC"}</Btn>
            <Btn variant="ghost" onClick={() => doHcAction("resume")} disabled={!!hcAction}
              style={{ fontSize: "0.75rem", color: C.green }}>{hcAction === "resume" ? "Resuming..." : "Resume HC"}</Btn>
          </div>

          {/* HC raw status */}
          <details style={{ marginBottom: "0.5rem" }}>
            <summary style={{ fontSize: "0.75rem", color: C.textMuted, cursor: "pointer" }}>HC Detail</summary>
            <pre style={{ fontSize: "0.7rem", color: C.textFaint, background: C.bgInput, padding: "0.4rem",
              borderRadius: "3px", marginTop: "0.3rem", overflow: "auto", maxHeight: "8rem", whiteSpace: "pre-wrap" }}>
              {telemetry.hc_status}
            </pre>
          </details>

          {/* Trigger log breakdown by state */}
          {telemetry.trigger_log?.length > 0 && (
            <details style={{ marginTop: "0.3rem" }}>
              <summary style={{ fontSize: "0.75rem", color: C.textMuted, cursor: "pointer" }}>Trigger Log by State</summary>
              <div style={{ marginTop: "0.3rem" }}><DataTable rows={telemetry.trigger_log} columns={["state", "count"]} /></div>
            </details>
          )}

          {/* Trigger log backlog by table — shows which tables consume HC bandwidth */}
          {telemetry.trigger_log_by_table?.length > 0 && (
            <details style={{ marginTop: "0.3rem" }}>
              <summary style={{ fontSize: "0.75rem", color: C.textMuted, cursor: "pointer" }}>
                Trigger Log Backlog by Table ({telemetry.trigger_log_by_table.reduce((s, r) => s + parseInt(r.count || 0), 0).toLocaleString()} pending)
              </summary>
              <div style={{ marginTop: "0.3rem" }}><DataTable rows={telemetry.trigger_log_by_table} columns={["table_name", "count"]} /></div>
            </details>
          )}

          {/* Dynos */}
          {telemetry.dynos && !telemetry.dynos.includes("Error") && (
            <details style={{ marginTop: "0.5rem" }}>
              <summary style={{ fontSize: "0.75rem", color: C.textMuted, cursor: "pointer" }}>Dynos</summary>
              <pre style={{ fontSize: "0.7rem", color: C.textFaint, background: C.bgInput, padding: "0.4rem",
                borderRadius: "3px", marginTop: "0.3rem", overflow: "auto", whiteSpace: "pre-wrap" }}>
                {telemetry.dynos}
              </pre>
            </details>
          )}

          {/* Release */}
          {telemetry.recent_release && (
            <div style={{ fontSize: "0.75rem", color: C.textFaint, marginTop: "0.5rem" }}>
              {telemetry.recent_release}
            </div>
          )}
        </>)}
      </Card>
    </div>
  );
}

function NewEnvironment({ onNav, onCreated }) {
  const [form, setForm] = useState({ name: "", db_app: "", rails_app: "", org_id: "" });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async () => {
    if (!form.name.trim() || !form.db_app.trim()) { setError("Name and Database App are required"); return; }
    setSaving(true); setError(null);
    try {
      const result = await api.post("/environments", form);
      if (result.errors) { setError(result.errors.join(", ")); setSaving(false); return; }
      onCreated();
      onNav("env-show", result.id);
    } catch (e) { setError(e.message); setSaving(false); }
  };

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out", maxWidth: "32rem" }}>
      <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700, marginBottom: "1rem" }}>Add Environment</h2>
      {error && <ErrorBox error={error} />}
      <div style={{ display: "flex", flexDirection: "column", gap: "0.7rem" }}>
        <Input label="Name / Alias" value={form.name} onChange={v => setForm({...form, name: v})} placeholder="amart, staging..." />
        <Input label="Rails App" value={form.rails_app} onChange={v => setForm({...form, rails_app: v})} placeholder="m-f-3c62d74e-v21" />
        <Input label="Database App" value={form.db_app} onChange={v => setForm({...form, db_app: v})} placeholder="m-f-3c62d74e" />
        <Input label="Tenant Org ID" value={form.org_id} onChange={v => setForm({...form, org_id: v})} placeholder="00d5i000007ezuheag" />
        <div style={{ display: "flex", gap: "0.5rem" }}>
          <Btn onClick={handleSubmit} disabled={saving}>{saving ? "Creating..." : "Create"}</Btn>
          <Btn variant="ghost" onClick={() => onNav("dashboard")}>Cancel</Btn>
        </div>
      </div>
    </div>
  );
}

function NewInvestigation({ environments, onNav, onCreated }) {
  const [form, setForm] = useState({ title: "", entity_type: "", entity_id: "", environment: "", case_number: "", case_url: "", description: "" });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async () => {
    if (!form.title.trim()) { setError("Title is required"); return; }
    setSaving(true); setError(null);
    try {
      const result = await api.post("/investigations", form);
      if (result.errors) { setError(result.errors.join(", ")); setSaving(false); return; }
      onCreated();
      onNav("show", result.id);
    } catch (e) { setError(e.message); setSaving(false); }
  };

  return (
    <div style={{ animation: "fadeIn 0.3s ease-out", maxWidth: "32rem" }}>
      <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700, marginBottom: "1rem" }}>
        New Investigation
      </h2>

      {error && <ErrorBox error={error} />}

      <div style={{ display: "flex", flexDirection: "column", gap: "0.7rem" }}>
        <Input label="Title" value={form.title} onChange={v => setForm({ ...form, title: v })}
          placeholder="Describe the issue" />

        <Select label="Environment" value={form.environment}
          onChange={v => setForm({ ...form, environment: v })}
          options={environments.map(e => ({ value: e.name, label: `${e.name} (${e.db_app})` }))}
          placeholder="Default (amart)" />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
          <Input label="Case #" value={form.case_number} onChange={v => setForm({ ...form, case_number: v })} placeholder="WEB-8502" />
          <Input label="Case URL" value={form.case_url} onChange={v => setForm({ ...form, case_url: v })} placeholder="https://..." />
        </div>

        <div style={{ fontSize: "0.7rem", letterSpacing: "0.08em", textTransform: "uppercase",
          color: C.textMuted, fontWeight: 500, marginTop: "0.3rem", borderTop: `1px solid ${C.border}`,
          paddingTop: "0.5rem" }}>Entity (optional)</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.5rem" }}>
          <Select label="Type" value={form.entity_type}
            onChange={v => setForm({ ...form, entity_type: v })}
            options={[{ value: "order", label: "Order" }, { value: "cart", label: "Cart" },
              { value: "payment", label: "Payment" }, { value: "contact", label: "Contact" }]}
            placeholder="Any" />
          <Input label="SC_ID" value={form.entity_id}
            onChange={v => setForm({ ...form, entity_id: v })} placeholder="abc123..." />
          <Input label="Reference" value={form.entity_ref || ""}
            onChange={v => setForm({ ...form, entity_ref: v })} placeholder="AMRT..." />
        </div>

        <div>
          <label style={{ fontSize: "0.7rem", letterSpacing: "0.08em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500 }}>Description</label>
          <textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })}
            rows={3} placeholder="Context from the case..."
            style={{ display: "block", width: "100%", marginTop: "0.25rem", background: C.bgInput, color: C.text, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.5rem", fontFamily: font.mono, fontSize: "1rem", resize: "vertical", boxSizing: "border-box" }} />
        </div>

        <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
          <Btn onClick={handleSubmit} disabled={saving}>{saving ? "Creating..." : "Create"}</Btn>
          <Btn variant="ghost" onClick={() => onNav("dashboard")}>Cancel</Btn>
        </div>
      </div>
    </div>
  );
}

// --- Tool Panels ---

function Card({ children, style: extra }) {
  return <div style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px", padding: "0.7rem", marginBottom: "0.8rem", ...extra }}>{children}</div>;
}

function SectionLabel({ children }) {
  return <div style={{ fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500, marginBottom: "0.4rem" }}>{children}</div>;
}

function DataTable({ rows, columns }) {
  if (!rows || rows.length === 0) return <div style={{ color: C.textFaint, fontSize: "0.8rem", padding: "0.5rem" }}>(no results)</div>;
  const cols = columns || Object.keys(rows[0]);
  const isMobile = typeof window !== "undefined" && window.innerWidth < 640;

  if (isMobile) {
    // Card layout for mobile
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
        {rows.map((row, i) => (
          <div key={i} style={{ background: C.bgInput, border: `1px solid ${C.border}`, borderRadius: "4px", padding: "0.5rem" }}>
            {cols.map(c => (
              <div key={c} style={{ display: "flex", justifyContent: "space-between", padding: "0.15rem 0", borderBottom: `1px solid ${C.border}22` }}>
                <span style={{ fontSize: "0.7rem", color: C.textMuted, textTransform: "uppercase", letterSpacing: "0.06em" }}>{c}</span>
                <span style={{ fontSize: "0.8rem", textAlign: "right", maxWidth: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{String(row[c] ?? "")}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

  // Desktop table
  return (
    <div style={{ overflowX: "auto" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.8rem" }}>
        <thead>
          <tr>{cols.map(c => <th key={c} style={{ textAlign: "left", padding: "0.4rem 0.5rem", fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", color: C.textMuted, fontWeight: 500, borderBottom: `1px solid ${C.border}` }}>{c}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i} style={{ background: i % 2 === 0 ? "transparent" : C.bgCard }}>
              {cols.map(c => <td key={c} style={{ padding: "0.4rem 0.5rem", borderBottom: `1px solid ${C.border}`, whiteSpace: "nowrap", maxWidth: "14rem", overflow: "hidden", textOverflow: "ellipsis" }}>{String(row[c] ?? "")}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AddToInvestigation({ entryType, content, investigations }) {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const save = async (invId) => {
    setSaving(true);
    await api.post(`/investigations/${invId}/entries`, { entry_type: entryType, content });
    setSaving(false); setSaved(true); setOpen(false);
    setTimeout(() => setSaved(false), 3000);
  };

  if (saved) return <span style={{ fontSize: "0.7rem", color: C.green }}>Saved to investigation</span>;

  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      <Btn variant="ghost" onClick={() => setOpen(!open)} style={{ fontSize: "0.7rem", padding: "0.2rem 0.5rem" }}>
        + Add to Investigation
      </Btn>
      {open && (
        <div style={{
          position: "absolute", top: "100%", left: 0, zIndex: 10, marginTop: "0.25rem",
          background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
          padding: "0.3rem", minWidth: "14rem", maxHeight: "12rem", overflowY: "auto",
        }}>
          {investigations.length === 0 && <div style={{ fontSize: "0.75rem", color: C.textFaint, padding: "0.3rem" }}>No open investigations</div>}
          {investigations.map(inv => (
            <div key={inv.id} onClick={() => save(inv.id)} style={{
              padding: "0.3rem 0.5rem", cursor: "pointer", borderRadius: "3px",
              fontSize: "0.75rem", transition: "background 0.1s",
            }}
            onMouseEnter={e => e.currentTarget.style.background = C.bgHover}
            onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
              <span style={{ color: C.text }}>{inv.title}</span>
              {inv.environment && <span style={{ color: C.textFaint, marginLeft: "0.3rem" }}>({inv.environment})</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ChatPanel({ chatEntries, chatMsg, setChatMsg, chatLoading, chatError, sendChat }) {
  const [claudeConnected, setClaudeConnected] = useState(null);

  useEffect(() => {
    api.get("/integrations/claude/status")
      .then(data => setClaudeConnected(data.connected))
      .catch(() => setClaudeConnected(false));
  }, []);

  const isAuthError = chatError && (chatError.includes("api_key") || chatError.includes("authentication") || chatError.includes("401") || chatError.includes("Not authenticated"));
  const needsSetup = claudeConnected === false || isAuthError;
  const errorMsg = isAuthError
    ? null // handled by needsSetup banner
    : (chatError || null);

  return (
    <div style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px", padding: "0.7rem" }}>
      <div style={{ fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase",
        color: C.textMuted, fontWeight: 500, marginBottom: "0.5rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span>Chat with Watson</span>
        {claudeConnected === true && <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: C.green, display: "inline-block" }} />}
        {claudeConnected === false && <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: C.red, display: "inline-block" }} />}
      </div>

      {needsSetup && (
        <div style={{ background: C.red + "12", border: `1px solid ${C.red}28`, borderRadius: "4px",
          padding: "0.5rem 0.6rem", marginBottom: "0.5rem", fontSize: "0.8rem", color: C.red, lineHeight: 1.5 }}>
          Claude is not connected.{" "}
          <span onClick={() => globalNav("integrations")} style={{ textDecoration: "underline", cursor: "pointer", fontWeight: 500 }}>
            Go to Setup
          </span>{" "}
          to add your API key, or{" "}
          <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener"
            style={{ color: C.red, textDecoration: "underline", fontWeight: 500 }}>get a key from Anthropic</a>.
        </div>
      )}

      {errorMsg && (
        <div style={{ background: C.red + "12", border: `1px solid ${C.red}28`, borderRadius: "4px",
          padding: "0.5rem 0.6rem", marginBottom: "0.5rem", fontSize: "0.8rem", color: C.red, lineHeight: 1.4 }}>
          {errorMsg}
        </div>
      )}

      {chatLoading && (
        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", marginBottom: "0.5rem",
          padding: "0.4rem 0.6rem", background: C.purple + "10", borderRadius: "4px" }}>
          <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: C.purple, animation: "pulse 1.5s infinite" }} />
          <span style={{ fontSize: "0.8rem", color: C.purple }}>Watson is thinking...</span>
        </div>
      )}

      <div style={{ maxHeight: "16rem", overflowY: "auto", marginBottom: "0.5rem" }}>
        {chatEntries.length === 0 && !chatLoading && !errorMsg && (
          <div style={{ color: C.textFaint, fontSize: "0.8rem", padding: "0.3rem" }}>No messages yet. Ask Watson about this investigation.</div>
        )}
        {chatEntries.map(e => (
          <div key={e.id} style={{
            background: e.content?.role === "user" ? C.bgInput : C.purple + "10",
            borderRadius: "5px", padding: "0.5rem 0.6rem", marginBottom: "0.4rem",
            marginLeft: e.content?.role === "user" ? "1.5rem" : 0,
            marginRight: e.content?.role !== "user" ? "1.5rem" : 0,
          }}>
            <div style={{ fontSize: "0.7rem", color: C.textFaint, marginBottom: "0.2rem", fontWeight: 500 }}>
              {e.content?.role === "user" ? "You" : "Watson"}
            </div>
            <div style={{ fontSize: "0.85rem", whiteSpace: "pre-wrap", lineHeight: 1.5 }}>{e.content?.text}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: "0.3rem" }}>
        <input value={chatMsg} onChange={e => setChatMsg(e.target.value)}
          onKeyDown={e => e.key === "Enter" && !e.shiftKey && sendChat()}
          placeholder={claudeConnected === false ? "Connect Claude first..." : "Ask Watson..."}
          disabled={chatLoading || claudeConnected === false}
          style={{
            flex: 1, background: C.bgInput, color: C.text, border: `1px solid ${C.border}`,
            borderRadius: "3px", padding: "0.5rem", fontFamily: font.mono,
            fontSize: "1rem", outline: "none",
            opacity: claudeConnected === false ? 0.5 : 1,
          }} />
        <Btn onClick={sendChat} disabled={chatLoading || !chatMsg.trim() || claudeConnected === false}>
          {chatLoading ? "..." : "Send"}
        </Btn>
      </div>
    </div>
  );
}

// Renders a key-value detail view for a single record
function RecordDetail({ record, label }) {
  if (!record || typeof record !== "object") return null;
  const entries = Object.entries(record).filter(([, v]) => v != null && v !== "");
  if (entries.length === 0) return null;
  return (
    <div style={{ marginBottom: "0.5rem" }}>
      {label && <div style={{ fontSize: "0.75rem", fontWeight: 500, color: C.textDim, marginBottom: "0.3rem",
        textTransform: "uppercase", letterSpacing: "0.06em" }}>{label}</div>}
      <div style={{ display: "grid", gridTemplateColumns: "minmax(8rem, auto) 1fr", fontSize: "0.8rem", lineHeight: 1.6 }}>
        {entries.map(([k, v]) => [
          <div key={k+"k"} style={{ color: C.textMuted, padding: "0.15rem 0.5rem 0.15rem 0",
            borderBottom: `1px solid ${C.border}11`, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{k}</div>,
          <div key={k+"v"} style={{ padding: "0.15rem 0", borderBottom: `1px solid ${C.border}11`,
            wordBreak: "break-all" }}>{String(v)}</div>,
        ])}
      </div>
    </div>
  );
}

// Renders a list of records as a responsive table or card list
function RecordList({ records, label }) {
  if (!records || !Array.isArray(records) || records.length === 0) return null;
  const cols = Object.keys(records[0]).slice(0, 8); // Limit visible columns

  return (
    <div style={{ marginBottom: "0.5rem" }}>
      {label && <div style={{ fontSize: "0.75rem", fontWeight: 500, color: C.textDim, marginBottom: "0.3rem",
        textTransform: "uppercase", letterSpacing: "0.06em" }}>{label} ({records.length})</div>}
      <div style={{ overflowX: "auto", border: `1px solid ${C.border}`, borderRadius: "4px" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.75rem" }}>
          <thead>
            <tr style={{ background: C.bgInput }}>
              {cols.map(c => <th key={c} style={{ textAlign: "left", padding: "0.35rem 0.5rem",
                fontSize: "0.65rem", letterSpacing: "0.08em", textTransform: "uppercase",
                color: C.textMuted, fontWeight: 500, borderBottom: `1px solid ${C.border}` }}>{c}</th>)}
            </tr>
          </thead>
          <tbody>
            {records.map((row, i) => (
              <tr key={i} style={{ background: i % 2 ? C.bgCard : "transparent" }}>
                {cols.map(c => <td key={c} style={{ padding: "0.35rem 0.5rem",
                  borderBottom: `1px solid ${C.border}22`, maxWidth: "12rem",
                  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{String(row[c] ?? "")}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// Renders a tool result entry with grouped records
function ToolResultView({ entry }) {
  const content = entry.content;
  if (!content) return <div style={{ color: C.textFaint, fontSize: "0.8rem" }}>(empty)</div>;

  // Note entries
  if (entry.entry_type === "note") {
    if (content.action === "connected_case") {
      return <div style={{ fontSize: "0.8rem" }}>Connected Salesforce case <span style={{ color: C.accent }}>{content.case_number}</span></div>;
    }
    if (content.action === "logged_bug") {
      return (
        <div style={{ fontSize: "0.8rem" }}>
          Filed bug: <a href={content.bug_url} target="_blank" rel="noopener" style={{ color: C.accent }}>{content.bug_name}</a>
          {content.title && <span style={{ color: C.textDim }}> — {content.title}</span>}
        </div>
      );
    }
    return <pre style={{ fontSize: "0.8rem", whiteSpace: "pre-wrap" }}>{typeof content === "object" ? JSON.stringify(content, null, 2) : content}</pre>;
  }

  // Tool results (lookup, audit, timeline, shipments)
  const result = content.result || content;
  const params = content.params;
  const tool = content.tool || entry.entry_type;

  // Lookup result: grouped by record type
  if (result.results && typeof result.results === "object" && !Array.isArray(result.results)) {
    return (
      <div>
        {params && <div style={{ fontSize: "0.7rem", color: C.textFaint, marginBottom: "0.4rem" }}>
          {Object.entries(params).filter(([,v]) => v).map(([k,v]) => `${k}: ${v}`).join(" · ")}
        </div>}
        {Object.entries(result.results).map(([key, data]) => {
          if (Array.isArray(data)) {
            return <RecordList key={key} records={data} label={key} />;
          } else if (data && typeof data === "object") {
            return <RecordDetail key={key} record={data} label={key} />;
          }
          return null;
        })}
      </div>
    );
  }

  // Audit result: table of results
  if (result.results && Array.isArray(result.results)) {
    return (
      <div>
        {result.total != null && <div style={{ fontSize: "0.75rem", color: C.textDim, marginBottom: "0.3rem" }}>
          {result.total} records, {result.issues || 0} issues
        </div>}
        <RecordList records={result.results} />
      </div>
    );
  }

  // Timeline result
  if (result.entity && result.log_entries) {
    const groups = result.grouped_timeline || [];
    return (
      <div>
        <RecordDetail record={result.entity} label={result.entity_type} />
        {result.log_entries?.length > 0 && (
          <details open>
            <summary style={{ fontSize: "0.8rem", color: C.textDim, cursor: "pointer", marginBottom: "0.3rem" }}>
              Timeline ({result.log_entries.length} events)
            </summary>
            <div style={{ maxHeight: "15rem", overflow: "auto" }}>
              {groups.length > 0 ? groups.map((g, gi) => (
                <div key={gi} style={{ marginBottom: "0.3rem" }}>
                  <div style={{ fontSize: "0.7rem", color: C.accent, fontFamily: font.mono, marginBottom: "0.15rem" }}>{g.time} ({g.count})</div>
                  {g.entries.map((e, i) => (
                    <div key={i} style={{ borderLeft: `2px solid ${C.purple}33`, paddingLeft: "0.5rem", marginBottom: "0.2rem" }}>
                      <span style={{ fontSize: "0.7rem", color: C.textFaint }}>{e.timestamp?.split("T")[1]?.slice(0,8)} {e.program}</span>
                      <div style={{ fontSize: "0.8rem" }}>{e.message?.slice(0, 200)}</div>
                    </div>
                  ))}
                </div>
              )) : result.log_entries.map((e, i) => (
                <div key={i} style={{ borderLeft: `2px solid ${C.purple}33`, paddingLeft: "0.5rem", marginBottom: "0.3rem" }}>
                  <span style={{ fontSize: "0.7rem", color: C.textFaint }}>{e.timestamp}</span>
                  <div style={{ fontSize: "0.8rem" }}>{e.message?.slice(0, 200)}</div>
                </div>
              ))}
            </div>
          </details>
        )}
        {result.related && Object.entries(result.related).map(([name, rows]) =>
          rows?.length > 0 && <RecordList key={name} records={rows} label={name} />
        )}
      </div>
    );
  }

  // Fallback: pretty-print JSON
  return <pre style={{ fontSize: "0.75rem", background: C.bgInput, padding: "0.4rem",
    borderRadius: "3px", overflow: "auto", maxHeight: "12rem", whiteSpace: "pre-wrap" }}>
    {typeof content === "object" ? JSON.stringify(content, null, 2) : String(content)}
  </pre>;
}

function ShareUrl({ url }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(url).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); });
  };
  return (
    <div style={{
      background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
      padding: "0.6rem 0.7rem", marginBottom: "0.8rem",
      display: "flex", justifyContent: "space-between", alignItems: "center", gap: "0.5rem",
    }}>
      <div style={{ minWidth: 0, overflow: "hidden" }}>
        <span style={{ fontSize: "0.75rem", color: C.textDim }}>Share: </span>
        <span style={{ fontSize: "0.75rem", color: C.accent, wordBreak: "break-all" }}>{url}</span>
      </div>
      <button onClick={copy} style={{
        flexShrink: 0, background: copied ? C.green + "18" : C.bgInput,
        border: `1px solid ${copied ? C.green + "44" : C.border}`, borderRadius: "3px",
        padding: "0.3rem 0.6rem", fontSize: "0.75rem", color: copied ? C.green : C.textDim,
        cursor: "pointer", fontFamily: font.mono, transition: "all 0.15s",
      }}>{copied ? "Copied" : "Copy"}</button>
    </div>
  );
}

function ErrorBox({ error }) {
  if (!error) return null;
  return <div style={{ background: C.red + "18", border: `1px solid ${C.red}33`, borderRadius: "5px", padding: "0.5rem 0.7rem", marginBottom: "0.8rem", fontSize: "0.8rem", color: C.red }}>{error}</div>;
}

function ToolPage({ title, children }) {
  return (
    <div style={{ animation: "fadeIn 0.3s ease-out" }}>
      <h2 style={{ fontFamily: font.heading, fontSize: "1.3rem", fontWeight: 700, marginBottom: "1rem" }}>{title}</h2>
      {children}
    </div>
  );
}

function LookupPage({ environments, investigations }) {
  const [form, setForm] = useState({ sc_id: "", table: "", ref: "", env: "", with_related: "0" });
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const run = async () => {
    setLoading(true); setError(null); setResult(null);
    try {
      const r = await api.post("/lookup", form);
      if (r.error) { setError(r.error); } else { setResult(r); }
    } catch (e) { setError(e.message); }
    setLoading(false);
  };

  return (
    <ToolPage title="Record Lookup">
      <Card>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.5rem" }}>
            <Select label="Environment" value={form.env} onChange={v => setForm({...form, env: v})}
              options={environments.map(e => ({value: e.name, label: e.name}))} placeholder="Default" />
            <Input label="SC_ID / SFID" value={form.sc_id} onChange={v => setForm({...form, sc_id: v})} placeholder="07c07f7a..." />
            <Select label="Table" value={form.table} onChange={v => setForm({...form, table: v})}
              options={["order","order_item","payment","payment_item","cart","cart_item","cart_item_tax","contact","shipment","cart_fulfillment","cart_fulfillment_item","fulfillment_item","line_item","register_shift","payment_gateway_txn"]} placeholder="Select table" />
          </div>
          <Input label="Order Reference" value={form.ref} onChange={v => setForm({...form, ref: v})} placeholder="AMRT..." />
          <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
            <Btn onClick={run} disabled={loading}>{loading ? "Looking up..." : "Lookup"}</Btn>
            <label style={{ fontSize: "0.75rem", color: C.textDim, display: "flex", alignItems: "center", gap: "0.3rem" }}>
              <input type="checkbox" checked={form.with_related === "1"} onChange={e => setForm({...form, with_related: e.target.checked ? "1" : "0"})} style={{ accentColor: C.accent }} /> Related records
            </label>
          </div>
        </div>
      </Card>
      <ErrorBox error={error} />
      {result && (
        <div style={{ marginBottom: "0.5rem" }}>
          <AddToInvestigation entryType="lookup" content={result} investigations={investigations.filter(i => i.status === "open")} />
        </div>
      )}
      {result && Object.entries(result.results).map(([key, data]) => (
        <Card key={key}>
          <SectionLabel>{key}</SectionLabel>
          {Array.isArray(data) ? <DataTable rows={data} /> : (
            <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.15rem 0.8rem", fontSize: "0.8rem" }}>
              {Object.entries(data).map(([k, v]) => [
                <dt key={k+"k"} style={{ color: C.textMuted, fontWeight: 500 }}>{k}</dt>,
                <dd key={k+"v"} style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{String(v ?? "")}</dd>
              ])}
            </dl>
          )}
        </Card>
      ))}
    </ToolPage>
  );
}

function AuditPage({ environments, investigations }) {
  const [form, setForm] = useState({ payment_sc_id: "", order_sc_id: "", from: "", to: "", method: "all", env: "" });
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const run = async () => {
    setLoading(true); setError(null); setResult(null);
    try {
      const r = await api.post("/audit", form);
      if (r.error) { setError(r.error); } else { setResult(r); }
    } catch (e) { setError(e.message); }
    setLoading(false);
  };

  return (
    <ToolPage title="Payment Audit">
      <Card>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          <Select label="Environment" value={form.env} onChange={v => setForm({...form, env: v})}
            options={environments.map(e => ({value: e.name, label: e.name}))} placeholder="Default" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
            <Input label="Payment SC_ID" value={form.payment_sc_id} onChange={v => setForm({...form, payment_sc_id: v})} />
            <Input label="Order SC_ID" value={form.order_sc_id} onChange={v => setForm({...form, order_sc_id: v})} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.5rem" }}>
            <Input label="From" type="date" value={form.from} onChange={v => setForm({...form, from: v})} />
            <Input label="To" type="date" value={form.to} onChange={v => setForm({...form, to: v})} />
            <Select label="Method" value={form.method} onChange={v => setForm({...form, method: v})}
              options={[{value: "all", label: "All"}, {value: "linkly", label: "Linkly"}, {value: "vii", label: "VII"}]} />
          </div>
          <Btn onClick={run} disabled={loading}>{loading ? "Auditing..." : "Run Audit"}</Btn>
        </div>
      </Card>
      <ErrorBox error={error} />
      {result && (
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.4rem" }}>
            <SectionLabel>Results ({result.total} payments, {result.issues} issues)</SectionLabel>
            <AddToInvestigation entryType="audit" content={result} investigations={investigations.filter(i => i.status === "open")} />
          </div>
          <DataTable rows={result.results} columns={["sc_id","method","recorded_amount","terminal_amount","diff","status"]} />
        </Card>
      )}
    </ToolPage>
  );
}

function TimelinePage({ environments, investigations }) {
  const [form, setForm] = useState({ sc_id: "", table: "", from: "", to: "", env: "", with_related: "1" });
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const run = async () => {
    setLoading(true); setError(null); setResult(null);
    try {
      const r = await api.post("/timeline", form);
      if (r.error) { setError(r.error); } else { setResult(r); }
    } catch (e) { setError(e.message); }
    setLoading(false);
  };

  return (
    <ToolPage title="Timeline">
      <Card>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.5rem" }}>
            <Select label="Environment" value={form.env} onChange={v => setForm({...form, env: v})}
              options={environments.map(e => ({value: e.name, label: e.name}))} placeholder="Default" />
            <Select label="Table" value={form.table} onChange={v => setForm({...form, table: v})}
              options={["order","order_item","payment","cart","cart_item","contact","shipment","cart_fulfillment"]} placeholder="Auto (order/cart)" />
            <Input label="SC_ID" value={form.sc_id} onChange={v => setForm({...form, sc_id: v})} placeholder="sc_id..." />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
            <Input label="From" type="date" value={form.from} onChange={v => setForm({...form, from: v})} />
            <Input label="To" type="date" value={form.to} onChange={v => setForm({...form, to: v})} />
          </div>
          <Btn onClick={run} disabled={loading}>{loading ? "Building..." : "Build Timeline"}</Btn>
        </div>
      </Card>
      <ErrorBox error={error} />
      {result && (
        <>
          <AccessNotice access={result.support_access} />
          <Card>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.4rem" }}>
              <SectionLabel>{result.entity_type} {result.sc_id?.slice(0,8)}</SectionLabel>
              <AddToInvestigation entryType="timeline" content={result} investigations={investigations.filter(i => i.status === "open")} />
            </div>
            <RecordDetail record={result.entity} />
          </Card>

          {/* Grouped timeline */}
          <Card>
            <SectionLabel>Timeline ({result.log_entries?.length || 0} events)</SectionLabel>
            {(result.grouped_timeline || []).length > 0 ? (
              <div style={{ maxHeight: "25rem", overflow: "auto" }}>
                {result.grouped_timeline.map((group, gi) => (
                  <details key={gi} open={gi < 3}>
                    <summary style={{ fontSize: "0.8rem", color: C.textDim, cursor: "pointer",
                      padding: "0.3rem 0", borderBottom: `1px solid ${C.border}22`,
                      display: "flex", justifyContent: "space-between" }}>
                      <span style={{ fontFamily: font.mono, color: C.accent }}>{group.time}</span>
                      <span style={{ color: C.textFaint }}>{group.count} event{group.count > 1 ? "s" : ""}</span>
                    </summary>
                    <div style={{ paddingLeft: "0.5rem", marginBottom: "0.3rem" }}>
                      {group.entries.map((e, i) => (
                        <div key={i} style={{ borderLeft: `2px solid ${C.purple}33`, paddingLeft: "0.5rem",
                          marginTop: "0.2rem", marginBottom: "0.2rem" }}>
                          <div style={{ display: "flex", gap: "0.4rem", fontSize: "0.7rem", color: C.textFaint }}>
                            <span style={{ fontFamily: font.mono }}>{e.timestamp?.split("T")[1]?.slice(0,8)}</span>
                            <span>{e.program}</span>
                            {e._source_type && <span style={{ color: C.purple }}>({e._source_type})</span>}
                          </div>
                          <div style={{ fontSize: "0.8rem", marginTop: "0.1rem" }}>{e.message?.slice(0, 300)}</div>
                        </div>
                      ))}
                    </div>
                  </details>
                ))}
              </div>
            ) : (
              <div style={{ color: C.textFaint, fontSize: "0.8rem" }}>
                No log entries found. {!result.log_entries?.length && "Try specifying a date range."}
              </div>
            )}
          </Card>

          {/* Related records */}
          {Object.entries(result.related || {}).map(([name, rows]) => rows?.length > 0 && (
            <Card key={name}>
              <SectionLabel>{name} ({rows.length})</SectionLabel>
              <RecordList records={rows} />
            </Card>
          ))}
        </>
      )}
    </ToolPage>
  );
}

function ShipmentsPage({ environments, investigations }) {
  const [form, setForm] = useState({ order_sc_id: "", missing: "0", stuck: "0", from: "", env: "" });
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const run = async () => {
    setLoading(true); setError(null); setResult(null);
    try {
      const r = await api.post("/shipments", form);
      if (r.error) { setError(r.error); } else { setResult(r); }
    } catch (e) { setError(e.message); }
    setLoading(false);
  };

  return (
    <ToolPage title="Shipment Check">
      <Card>
        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
            <Select label="Environment" value={form.env} onChange={v => setForm({...form, env: v})}
              options={environments.map(e => ({value: e.name, label: e.name}))} placeholder="Default" />
            <Input label="Order SC_ID" value={form.order_sc_id} onChange={v => setForm({...form, order_sc_id: v})} />
          </div>
          <div style={{ display: "flex", gap: "1rem", fontSize: "0.75rem", color: C.textDim }}>
            <label style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
              <input type="checkbox" checked={form.missing === "1"} onChange={e => setForm({...form, missing: e.target.checked ? "1" : "0"})} style={{ accentColor: C.accent }} /> Missing shipments
            </label>
            <label style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
              <input type="checkbox" checked={form.stuck === "1"} onChange={e => setForm({...form, stuck: e.target.checked ? "1" : "0"})} style={{ accentColor: C.accent }} /> Stuck at pos-syncing
            </label>
          </div>
          <Input label="From Date" type="date" value={form.from} onChange={v => setForm({...form, from: v})} />
          <Btn onClick={run} disabled={loading}>{loading ? "Checking..." : "Check Shipments"}</Btn>
        </div>
      </Card>
      <ErrorBox error={error} />
      {result && (
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.4rem" }}>
            <SectionLabel>Results ({result.total})</SectionLabel>
            <AddToInvestigation entryType="audit" content={result} investigations={investigations.filter(i => i.status === "open")} />
          </div>
          <DataTable rows={result.results} columns={["order_sc_id","reference","checkout_step","shipment_count","status"]} />
        </Card>
      )}
    </ToolPage>
  );
}

function IntegrationCard({ int, onUpdated }) {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState("");
  const [saving, setSaving] = useState(false);

  const save = async () => {
    setSaving(true);
    await api.patch(`/integrations/${int.id}`, { value });
    setSaving(false); setEditing(false); setValue("");
    onUpdated();
  };

  const disconnect = async () => {
    setSaving(true);
    await api.patch(`/integrations/${int.id}`, { value: "" });
    setSaving(false); setEditing(false);
    onUpdated();
  };

  const cfg = int.config;
  const maskedValue = cfg?.has_value && cfg?.secret ? "••••••••••••" : null;

  return (
    <Card>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.3rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
          <span style={{ width: "8px", height: "8px", borderRadius: "50%", flexShrink: 0,
            background: int.connected ? C.green : C.red }} />
          <span style={{ fontSize: "0.9rem", fontWeight: 500 }}>{int.name}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
          {int.managed && (
            <span title="Credential held by Watson; not configurable per user" style={{ fontSize: "0.65rem", color: C.textFaint }}>managed</span>
          )}
          {cfg?.source === "user" && (
            <span style={{ fontSize: "0.65rem", color: C.textFaint }}>user key</span>
          )}
          {cfg?.source === "env" && (
            <span style={{ fontSize: "0.65rem", color: C.textFaint }}>env</span>
          )}
          <span style={{
            fontSize: "0.7rem", padding: "0.15rem 0.4rem", borderRadius: "3px",
            background: int.connected ? C.green + "18" : C.red + "18",
            color: int.connected ? C.green : C.red,
          }}>{int.connected ? "Connected" : "Not Connected"}</span>
        </div>
      </div>

      <p style={{ fontSize: "0.8rem", color: C.textDim, marginBottom: "0.4rem" }}>{int.description}</p>

      {int.detail && <p style={{ fontSize: "0.75rem", color: C.textFaint, marginBottom: "0.4rem" }}>{int.detail}</p>}

      {int.actions?.length > 0 && (
        <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap", marginBottom: "0.4rem" }}>
          {int.actions.map(a => (
            <span key={a} style={{ fontSize: "0.65rem", padding: "0.1rem 0.3rem", borderRadius: "3px",
              background: C.bgInput, color: C.textMuted, border: `1px solid ${C.border}` }}>{a}</span>
          ))}
        </div>
      )}

      {/* The chat runs on the user's own Claude subscription, never an API key */}
      {int.id === "claude" && !int.connected && !editing && (
        <div style={{ fontSize: "0.75rem", color: C.textDim, marginBottom: "0.4rem", lineHeight: 1.5 }}>
          On your own machine, in a terminal with Claude Code installed, run{" "}
          <code style={{ fontFamily: font.mono, color: C.accent }}>claude setup-token</code>, sign in to your Claude
          account, then paste the token it prints here. Watson runs the assistant on your subscription; the token is
          stored encrypted and never shown again.
        </div>
      )}

      {cfg && !editing && (
        <div style={{ display: "flex", gap: "0.3rem", marginTop: "0.3rem", borderTop: `1px solid ${C.border}`, paddingTop: "0.4rem" }}>
          <Btn variant="ghost" onClick={() => setEditing(true)} style={{ fontSize: "0.7rem", padding: "0.25rem 0.6rem" }}>
            {int.connected ? "Update Key" : "Connect"}
          </Btn>
          {cfg.has_value && cfg.source === "user" && (
            <Btn variant="ghost" onClick={disconnect} style={{ fontSize: "0.7rem", padding: "0.25rem 0.6rem", color: C.red }}>
              Disconnect
            </Btn>
          )}
        </div>
      )}

      {cfg && editing && (
        <div style={{ marginTop: "0.4rem", borderTop: `1px solid ${C.border}`, paddingTop: "0.4rem" }}>
          <div style={{ display: "flex", gap: "0.3rem", alignItems: "flex-end" }}>
            <div style={{ flex: 1 }}>
              <Input label={cfg.label} value={value} onChange={setValue}
                placeholder={cfg.placeholder} type={cfg.secret ? "password" : "text"} />
            </div>
            <Btn onClick={save} disabled={saving || !value.trim()}>{saving ? "..." : "Save"}</Btn>
            <Btn variant="ghost" onClick={() => { setEditing(false); setValue(""); }}>Cancel</Btn>
          </div>
          {maskedValue && (
            <p style={{ fontSize: "0.7rem", color: C.textFaint, marginTop: "0.2rem" }}>Current: {maskedValue}</p>
          )}
        </div>
      )}
    </Card>
  );
}

// The OAuth grants this user has approved: Claude Code, the watson CLI, any
// other MCP client. Watson issued each a token after the Salesforce sign-in;
// revoking here ends it immediately.
function ConnectedAppsCard() {
  const [tokens, setTokens] = useState(null);
  const load = () => api.get("/tokens").then(setTokens).catch(() => setTokens([]));
  useEffect(() => { load(); }, []);

  const revoke = async (t) => {
    await api.del(`/tokens/${t.id}`);
    load();
  };
  const when = (iso) => iso ? new Date(iso).toLocaleString() : "never";
  const origin = window.location.origin;
  const cmd = `claude mcp add --transport http watson ${origin}/mcp`;

  return (
    <Card>
      <div style={{ fontSize: "0.9rem", fontWeight: 500, marginBottom: "0.3rem" }}>Connected apps</div>
      <p style={{ fontSize: "0.8rem", color: C.textDim, marginBottom: "0.6rem" }}>
        Tools signed in as you through Watson. Each one runs Watson's investigation tools with your Salesforce access; revoke any you no longer use.
      </p>
      {tokens === null ? (
        <div style={{ color: C.textDim, fontSize: "0.8rem" }}>Loading...</div>
      ) : tokens.length === 0 ? (
        <div style={{ color: C.textFaint, fontSize: "0.8rem" }}>None yet.</div>
      ) : (
        <table style={{ width: "100%", fontSize: "0.75rem", borderCollapse: "collapse" }}>
          <thead>
            <tr style={{ color: C.textMuted, textAlign: "left" }}>
              <th style={{ padding: "0.2rem 0" }}>App</th><th>Connected</th><th>Last used</th><th>Expires</th><th></th>
            </tr>
          </thead>
          <tbody>
            {tokens.map(t => (
              <tr key={t.id} style={{ borderTop: `1px solid ${C.border}` }}>
                <td style={{ padding: "0.35rem 0" }}>{t.name}</td>
                <td style={{ color: C.textDim }}>{when(t.created_at)}</td>
                <td style={{ color: C.textDim }}>{when(t.last_used_at)}</td>
                <td style={{ color: C.textDim }}>{when(t.refresh_expires_at)}</td>
                <td style={{ textAlign: "right" }}>
                  <Btn variant="ghost" onClick={() => revoke(t)} style={{ fontSize: "0.7rem", padding: "0.2rem 0.5rem", color: C.red }}>Revoke</Btn>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <div style={{ marginTop: "0.8rem", borderTop: `1px solid ${C.border}`, paddingTop: "0.6rem", fontSize: "0.75rem", color: C.textDim, lineHeight: 1.6 }}>
        <div style={{ color: C.text, marginBottom: "0.2rem" }}>Use Watson from your terminal</div>
        In Claude Code, add the Watson MCP server, then run <code style={{ fontFamily: font.mono, color: C.accent }}>/mcp</code> and choose Watson to sign in with Salesforce:
        <pre style={{ fontFamily: font.mono, fontSize: "0.72rem", background: C.bgInput, border: `1px solid ${C.border}`, borderRadius: "3px", padding: "0.4rem 0.6rem", margin: "0.3rem 0", overflowX: "auto", color: C.text }}>{cmd}</pre>
        With the Watson repo checked out, <code style={{ fontFamily: font.mono, color: C.accent }}>bin/watson login</code> signs the CLI in the same way; every <code style={{ fontFamily: font.mono, color: C.accent }}>watson</code> command then runs through this instance.
      </div>
    </Card>
  );
}

function IntegrationsPage() {
  const [integrations, setIntegrations] = useState([]);
  const [loading, setLoading] = useState(true);

  const load = () => api.get("/integrations").then(data => { setIntegrations(data); setLoading(false); }).catch(() => setLoading(false));

  useEffect(() => { load(); }, []);

  if (loading) return <div style={{ color: C.textDim, padding: "2rem" }}>Loading...</div>;

  return (
    <ToolPage title="Setup">
      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
        {integrations.map(int => (
          <IntegrationCard key={int.id} int={int} onUpdated={load} />
        ))}
        <ConnectedAppsCard />
      </div>
    </ToolPage>
  );
}

// --- Nav ---

function Nav({ page, user, onNav, onLogout }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { key: "dashboard", label: "Dashboard" },
    { key: "list", label: "Investigations" },
    { key: "lookup", label: "Lookup" },
    { key: "audit", label: "Audit" },
    { key: "timeline", label: "Timeline" },
    { key: "shipments", label: "Shipments" },
    { key: "integrations", label: "Setup" },
  ];

  const navigate = (key) => { onNav(key); setMenuOpen(false); };

  return (
    <div style={{ marginBottom: "1.2rem", borderBottom: `1px solid ${C.border}`, padding: "0.5rem 0" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span onClick={() => navigate("dashboard")} style={{
          fontFamily: font.heading, fontSize: "0.85rem", fontWeight: 800,
          color: C.accent, cursor: "pointer", letterSpacing: "-0.01em",
        }}>W</span>
        <span onClick={() => setMenuOpen(!menuOpen)} style={{
          cursor: "pointer", padding: "0.3rem", display: "flex", flexDirection: "column",
          gap: "4px", width: "22px",
        }}>
          <span style={{ display: "block", height: "2px", background: menuOpen ? C.accent : C.textDim,
            borderRadius: "1px", transition: "all 0.2s",
            transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none" }} />
          <span style={{ display: "block", height: "2px", background: C.textDim,
            borderRadius: "1px", transition: "opacity 0.2s", opacity: menuOpen ? 0 : 1 }} />
          <span style={{ display: "block", height: "2px", background: menuOpen ? C.accent : C.textDim,
            borderRadius: "1px", transition: "all 0.2s",
            transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none" }} />
        </span>
      </div>
      {menuOpen && (
        <div style={{
          display: "flex", flexDirection: "column", gap: "0.15rem", marginTop: "0.5rem",
          paddingTop: "0.5rem", borderTop: `1px solid ${C.border}`,
        }}>
          {links.map(l => (
            <span key={l.key} onClick={() => navigate(l.key)} style={{
              fontSize: "0.85rem", letterSpacing: "0.06em", textTransform: "uppercase",
              color: page === l.key ? C.text : C.textDim, cursor: "pointer", padding: "0.45rem 0",
              fontWeight: page === l.key ? 500 : 400, transition: "color 0.15s",
            }}>{l.label}</span>
          ))}
          <div style={{ borderTop: `1px solid ${C.border}`, marginTop: "0.3rem", paddingTop: "0.5rem",
            display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: "0.75rem", color: C.textFaint }}>{user?.name}</span>
            <span onClick={() => { onLogout(); setMenuOpen(false); }} style={{ fontSize: "0.75rem", color: C.textFaint, cursor: "pointer" }}>Sign out</span>
          </div>
        </div>
      )}
    </div>
  );
}

// --- Helpers ---

function timeAgo(dateStr) {
  if (!dateStr) return "";
  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
  if (seconds < 60) return "just now";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

// --- Login ---

function ServerErrorPage({ error, onBack }) {
  const [showDetail, setShowDetail] = useState(false);
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ maxWidth: "28rem", width: "100%", padding: "1.5rem", textAlign: "center" }}>
        {/* Animated Watson brain SVG */}
        <svg viewBox="0 0 120 120" style={{ width: "100px", height: "100px", margin: "0 auto 1rem" }}>
          <circle cx="60" cy="60" r="25" fill="none" stroke={C.accent} strokeWidth="1.5" />
          <circle cx="60" cy="60" r="25" fill="none" stroke={C.accent} strokeWidth="1" opacity="0.4" style={{ animation: "pulse 2.5s ease-out infinite" }} />
          {[[60,35],[78,45],[82,65],[70,80],[50,80],[38,65],[42,45],[60,60]].map(([cx,cy], i) =>
            <circle key={i} cx={cx} cy={cy} r="2" fill={C.accent} opacity="0" style={{ animation: `pulse 3s ease-in-out ${i*0.4}s infinite` }} />
          )}
          <circle cx="95" cy="20" r="8" fill="none" stroke={C.textMuted} strokeWidth="1" strokeDasharray="3 3" style={{ animation: "spin 4s linear infinite", transformOrigin: "95px 20px" }} />
        </svg>

        <h1 style={{ fontFamily: font.heading, fontSize: "1.6rem", fontWeight: 800, color: C.accent, marginBottom: "0.4rem" }}>Watson is on it</h1>
        <p style={{ fontSize: "0.8rem", color: C.textDim, marginBottom: "1.2rem" }}>Something went wrong, but it's already being investigated.</p>

        <div style={{ background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px", padding: "0.8rem", textAlign: "left", marginBottom: "0.8rem" }}>
          <div style={{ fontSize: "0.7rem", color: C.orange, wordBreak: "break-word" }}>
            {error?.error_class ? `${error.error_class}: ` : ""}{error?.error || "An unexpected error occurred"}
          </div>
          {error?.error_id && (
            <div style={{ fontSize: "0.5rem", color: C.textFaint, marginTop: "0.4rem", letterSpacing: "0.1em" }}>Error ID: {error.error_id}</div>
          )}
          <button onClick={() => setShowDetail(!showDetail)} style={{
            background: "none", border: `1px solid ${C.borderLight}`, color: C.textMuted,
            fontFamily: font.mono, fontSize: "0.7rem", padding: "0.2rem 0.6rem", borderRadius: "3px",
            cursor: "pointer", marginTop: "0.5rem", letterSpacing: "0.06em",
          }}>{showDetail ? "Hide detail" : "Show full detail"}</button>
          {showDetail && error?.trace && (
            <pre style={{ fontSize: "0.5rem", color: C.textMuted, background: C.bgInput, padding: "0.4rem",
              borderRadius: "3px", marginTop: "0.5rem", overflow: "auto", maxHeight: "10rem", whiteSpace: "pre-wrap", lineHeight: 1.4 }}>
              {Array.isArray(error.trace) ? error.trace.join("\n") : error.trace}
            </pre>
          )}
        </div>

        <div style={{ background: C.green + "18", border: `1px solid ${C.green}33`, borderRadius: "5px",
          padding: "0.5rem 0.7rem", display: "flex", alignItems: "center", gap: "0.4rem", marginBottom: "1rem" }}>
          <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: C.green, animation: "pulse 2s infinite", flexShrink: 0 }} />
          <span style={{ fontSize: "0.7rem", color: C.green }}>This error has been automatically reported and logged for investigation.</span>
        </div>

        <span onClick={onBack} style={{ fontSize: "0.8rem", color: C.accent, cursor: "pointer" }}>Back to Watson</span>
      </div>
    </div>
  );
}

function LoginPage({ onLogin, herokuOAuth, salesforceOAuth, csrfToken }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(() => {
    try { return new URLSearchParams(window.location.search).get("login_error"); } catch { return null; }
  });

  const devLogin = async () => {
    setLoading(true); setError(null);
    try {
      const r = await api.post("/dev_login", {});
      if (r.authenticated) { onLogin(r.user); }
      else { setError("Login failed"); }
    } catch (e) { setError(e.message); }
    setLoading(false);
  };

  // OmniAuth only accepts a POST carrying the session's CSRF token, which
  // /api/auth_status hands out. Submit a hidden form.
  const oauthLogin = (provider) => {
    const form = document.createElement("form");
    form.method = "POST";
    form.action = `/auth/${provider}`;
    if (csrfToken) {
      const input = document.createElement("input");
      input.type = "hidden"; input.name = "authenticity_token"; input.value = csrfToken;
      form.appendChild(input);
    }
    document.body.appendChild(form);
    form.submit();
  };
  const herokuLogin = () => oauthLogin("heroku");
  const salesforceLogin = () => oauthLogin("salesforce");

  return (
    <div style={{
      minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <div style={{ width: "100%", maxWidth: "22rem", padding: "1rem" }}>
        <div style={{ textAlign: "center", marginBottom: "2rem" }}>
          <h1 style={{ fontFamily: font.heading, fontSize: "2.4rem", fontWeight: 800,
            color: C.accent, letterSpacing: "-0.02em" }}>Watson</h1>
          <p style={{ fontSize: "0.8rem", color: C.textDim, marginTop: "0.4rem",
            letterSpacing: "0.08em" }}>StoreConnect Investigation Platform</p>
        </div>

        {error && <ErrorBox error={error} />}

        <div style={{
          background: C.bgCard, border: `1px solid ${C.border}`, borderRadius: "5px",
          padding: "1.2rem", display: "flex", flexDirection: "column", gap: "0.6rem",
        }}>
          {salesforceOAuth && (
            <>
              <button onClick={salesforceLogin} style={{
                width: "100%", padding: "0.7rem", borderRadius: "4px", border: "none",
                background: C.accent, color: "#fff", fontFamily: font.mono,
                fontSize: "0.85rem", fontWeight: 500, letterSpacing: "0.04em", cursor: "pointer",
                transition: "opacity 0.15s",
              }}>Sign in with Salesforce</button>
              <p style={{ fontSize: "0.7rem", color: C.textFaint, textAlign: "center", lineHeight: 1.5 }}>
                Your StoreConnect org user, with the support permission set.
              </p>
            </>
          )}
          {herokuOAuth && (
            <>
              <button onClick={herokuLogin} style={{
                width: "100%", padding: "0.7rem", borderRadius: "4px", border: "none",
                background: C.purple, color: "#fff", fontFamily: font.mono,
                fontSize: "0.85rem", fontWeight: 500, letterSpacing: "0.04em", cursor: "pointer",
                transition: "opacity 0.15s",
              }}>Sign in with Heroku</button>

              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                <div style={{ flex: 1, height: "1px", background: C.border }} />
                <span style={{ fontSize: "0.7rem", color: C.textFaint, letterSpacing: "0.1em", textTransform: "uppercase" }}>or</span>
            <div style={{ flex: 1, height: "1px", background: C.border }} />
          </div>
            </>
          )}

          <button onClick={devLogin} disabled={loading} style={{
            width: "100%", padding: "0.7rem", borderRadius: "4px",
            border: `1px solid ${C.borderLight}`, background: "transparent",
            color: C.textDim, fontFamily: font.mono, fontSize: "0.85rem", fontWeight: 400,
            letterSpacing: "0.04em", cursor: loading ? "not-allowed" : "pointer",
            opacity: loading ? 0.5 : 1, transition: "opacity 0.15s",
          }}>{loading ? "Signing in..." : (herokuOAuth || salesforceOAuth) ? "Dev Login (skip OAuth)" : "Sign In"}</button>
        </div>
      </div>
    </div>
  );
}

// --- App ---

function App() {
  const [authed, setAuthed] = useState(null); // null = checking, true/false
  // Restore page from URL hash on load (lazy initializer — runs once)
  const [page, setPage] = useState(() => {
    const hash = window.location.hash.slice(1);
    return hash ? hash.split("/")[0] || "dashboard" : "dashboard";
  });
  const [pageId, setPageId] = useState(() => {
    const hash = window.location.hash.slice(1);
    return hash ? hash.split("/")[1] || null : null;
  });
  const [user, setUser] = useState(null);
  const [investigations, setInvestigations] = useState([]);
  const [environments, setEnvironments] = useState([]);
  const [serverError, setServerError] = useState(null);
  const [herokuOAuth, setHerokuOAuth] = useState(false);
  const [salesforceOAuth, setSalesforceOAuth] = useState(false);
  const [csrfToken, setCsrfToken] = useState(null);

  // Wire up global handlers
  onAuthFail = () => { setAuthed(false); setUser(null); };
  onServerError = (err) => { setServerError(err); };

  const load = useCallback(() => {
    api.get("/investigations").then(setInvestigations).catch(() => {});
    api.get("/environments").then(data => {
      setEnvironments(data);
      globalEnvLookup = {};
      data.forEach(e => { globalEnvLookup[e.name] = e.id; });
    }).catch(() => {});
  }, []);

  // Check auth on mount
  useEffect(() => {
    fetch("/api/auth_status", { credentials: "same-origin" })
      .then(r => r.json())
      .then(data => {
        setHerokuOAuth(!!data.heroku_oauth);
        setSalesforceOAuth(!!data.salesforce_oauth);
        setCsrfToken(data.csrf_token || null);
        if (data.authenticated) {
          setAuthed(true); setUser(data.user); load();
        } else {
          setAuthed(false);
        }
      })
      .catch(() => setAuthed(false));
  }, []);

  const onNav = useCallback((p, id) => {
    setPage(p); setPageId(id || null);
    const hash = id ? `${p}/${id}` : p;
    window.location.hash = hash === "dashboard" ? "" : hash;
    window.scrollTo(0, 0);
  }, []);
  globalNav = onNav;

  // Handle browser back/forward
  useEffect(() => {
    const handleHash = () => {
      const hash = window.location.hash.slice(1);
      if (hash) {
        const [p, id] = hash.split("/");
        setPage(p || "dashboard"); setPageId(id || null);
      } else {
        setPage("dashboard"); setPageId(null);
      }
    };
    window.addEventListener("hashchange", handleHash);
    return () => window.removeEventListener("hashchange", handleHash);
  }, []);

  const handleLogin = (u) => {
    setAuthed(true); setUser(u); load();
  };

  const handleLogout = async () => {
    await api.del("/logout");
    setAuthed(false); setUser(null);
  };

  // --- All hooks above this line --- early returns below ---

  // Still checking auth
  if (authed === null) return <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
    <span style={{ color: C.textDim, fontSize: "0.7rem", animation: "pulse 1.5s infinite" }}>Loading...</span>
  </div>;

  // Server error
  if (serverError) return <ServerErrorPage error={serverError} onBack={() => setServerError(null)} />;

  // Not authed — show login
  if (!authed) return <LoginPage onLogin={handleLogin} herokuOAuth={herokuOAuth} salesforceOAuth={salesforceOAuth} csrfToken={csrfToken} />;

  let content;
  switch (page) {
    case "dashboard":
      content = <Dashboard user={user} investigations={investigations} environments={environments} onNav={onNav} />;
      break;
    case "list":
      content = <InvestigationList investigations={investigations} onNav={onNav} />;
      break;
    case "show":
      content = <InvestigationShow id={pageId} onNav={onNav} environments={environments} />;
      break;
    case "new":
      content = <NewInvestigation environments={environments} onNav={onNav} onCreated={load} />;
      break;
    case "env-show":
      content = <EnvironmentDetail id={pageId} onNav={onNav} onUpdated={load} />;
      break;
    case "env-new":
      content = <NewEnvironment onNav={onNav} onCreated={load} />;
      break;
    case "lookup":
      content = <LookupPage environments={environments} investigations={investigations} />;
      break;
    case "audit":
      content = <AuditPage environments={environments} investigations={investigations} />;
      break;
    case "timeline":
      content = <TimelinePage environments={environments} investigations={investigations} />;
      break;
    case "shipments":
      content = <ShipmentsPage environments={environments} investigations={investigations} />;
      break;
    case "integrations":
      content = <IntegrationsPage />;
      break;
    default:
      content = <Dashboard user={user} investigations={investigations} onNav={onNav} />;
  }

  return (
    <div style={{ maxWidth: "56rem", margin: "0 auto", padding: "1rem 1.5rem 3rem" }}>
      <Nav page={page} user={user} onNav={onNav} onLogout={handleLogout} />
      {content}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);