"use client";

// Shared anatomy-card primitives — extracted so the agent command center
// (ClawCommandCenter) reuses the exact cards/styling. Behavior copied verbatim
// from Dashboard.tsx's in-file helpers.

import { useState, type CSSProperties } from "react";
import { Check, Pencil, ScrollText, X } from "lucide-react";

export const mono = "'JetBrains Mono', ui-monospace, monospace";

/** A brain section: rendered read-only with a pencil; click to edit as raw text
 *  and PATCH it back to `/api/claws/{id}/brain`. `children` is the display;
 *  `value` is the editable source. `onSaved` should re-fetch the brain. */
export function EditableSection({ clawId, field, value, onSaved, children, placeholder }: {
  clawId: string;
  field: "system_prompt" | "agent_md" | "persona" | "skills_md";
  value: string;
  onSaved?: () => void;
  children: React.ReactNode;
  placeholder?: string;
}) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);
  const [saving, setSaving] = useState(false);
  const save = async () => {
    setSaving(true);
    try {
      await fetch(`/api/claws/${clawId}/brain`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ [field]: draft }) });
      setEditing(false);
      onSaved?.();
    } catch {
      /* keep the editor open on failure */
    } finally {
      setSaving(false);
    }
  };
  if (editing) {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={placeholder} autoFocus
          style={{ width: "100%", minHeight: 130, resize: "vertical", boxSizing: "border-box", borderRadius: 8, border: "1px solid rgba(255,255,255,.14)", background: "#0b0b0e", color: "#e6e6ea", padding: 10, fontFamily: mono, fontSize: 12.5, lineHeight: 1.55 }} />
        <div style={{ display: "flex", gap: 8 }}>
          <button type="button" onClick={save} disabled={saving} style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "5px 12px", borderRadius: 7, border: 0, background: "#5fd08a", color: "#06140c", fontSize: 12, fontWeight: 700, cursor: "pointer" }}><Check size={13} />{saving ? "Saving…" : "Save"}</button>
          <button type="button" onClick={() => setEditing(false)} style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "5px 12px", borderRadius: 7, border: "1px solid rgba(255,255,255,.12)", background: "transparent", color: "#cfcfd5", fontSize: 12, cursor: "pointer" }}><X size={13} />Cancel</button>
        </div>
      </div>
    );
  }
  return (
    <div style={{ position: "relative" }}>
      <button type="button" onClick={() => { setDraft(value); setEditing(true); }} aria-label="Edit" title="Edit" style={{ position: "absolute", top: -2, right: -2, zIndex: 2, display: "inline-flex", alignItems: "center", justifyContent: "center", width: 24, height: 24, borderRadius: 6, border: "1px solid rgba(255,255,255,.1)", background: "rgba(8,8,10,.55)", color: "#8a8a92", cursor: "pointer" }}><Pencil size={12} /></button>
      {children}
    </div>
  );
}

// `GET /api/claws/{id}/brain` — the claw's .brain (cm-brain / ClawhDF5).
export type RawBrain = {
  exists: boolean;
  system_prompt: string | null;
  agent_md: string | null;
  personality: string | null;
  skills_md: string | null;
  skills: { name: string; body: string }[];
  tools: { name: string; state: string }[];
  memory: string[];
  stats: { skills: number; tools: number; memories: number };
} | null;

// Inline markdown: **bold** and `code` → styled spans (everything else verbatim).
function renderInline(text: string, kp: string): React.ReactNode[] {
  return text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g).filter(Boolean).map((p, i) => {
    if (p.startsWith("**") && p.endsWith("**")) return <strong key={`${kp}-${i}`} style={{ color: "#fff", fontWeight: 700 }}>{p.slice(2, -2)}</strong>;
    if (p.startsWith("`") && p.endsWith("`")) return <code key={`${kp}-${i}`} style={{ fontFamily: mono, fontSize: "0.9em", background: "rgba(255,255,255,.06)", padding: "1px 5px", borderRadius: 4, color: "#e6e6ea" }}>{p.slice(1, -1)}</code>;
    return <span key={`${kp}-${i}`}>{p}</span>;
  });
}

// A tiny, dependency-free Markdown renderer: headings, bullet lists, bold/code,
// paragraphs. Turns the raw prompt into readable prose instead of literal `##`.
export function MarkdownText({ text, baseSize = 14 }: { text: string; baseSize?: number }) {
  const lines = text.replace(/\r\n/g, "\n").split("\n");
  const blocks: React.ReactNode[] = [];
  let para: string[] = [];
  let list: string[] = [];
  const flushPara = () => {
    if (para.length) { const k = `p${blocks.length}`; blocks.push(<p key={k} style={{ margin: "0 0 10px", fontSize: baseSize, lineHeight: 1.65, color: "#d6d6dc" }}>{renderInline(para.join(" "), k)}</p>); para = []; }
  };
  const flushList = () => {
    if (list.length) { const k = `u${blocks.length}`; blocks.push(<ul key={k} style={{ margin: "0 0 10px", paddingLeft: 18, display: "flex", flexDirection: "column", gap: 5 }}>{list.map((li, i) => <li key={i} style={{ fontSize: baseSize, lineHeight: 1.55, color: "#d6d6dc" }}>{renderInline(li, `${k}-${i}`)}</li>)}</ul>); list = []; }
  };
  for (const raw of lines) {
    const line = raw.replace(/\s+$/, "");
    const h = line.match(/^(#{1,6})\s+(.*)$/);
    const li = line.match(/^\s*[-*]\s+(.*)$/);
    if (h) { flushPara(); flushList(); const lvl = h[1].length; const size = lvl <= 1 ? baseSize + 5 : lvl === 2 ? baseSize + 2 : baseSize + 1; const k = `h${blocks.length}`; blocks.push(<div key={k} style={{ fontSize: size, fontWeight: 700, color: "#fff", letterSpacing: "-.01em", margin: blocks.length ? "15px 0 7px" : "0 0 7px" }}>{renderInline(h[2], k)}</div>); }
    else if (li) { flushPara(); list.push(li[1]); }
    else if (line.trim() === "") { flushPara(); flushList(); }
    else { flushList(); para.push(line.replace(/^\s*>\s?/, "")); }
  }
  flushPara(); flushList();
  return <div>{blocks}</div>;
}

// A same-colored triangle toggle: points down when open, left when closed.
export function CollapseTick({ open, color, onClick }: { open: boolean; color: string; onClick: () => void }) {
  return (
    <button type="button" onClick={onClick} aria-label={open ? "Collapse" : "Expand"} aria-expanded={open}
      style={{ flex: "none", border: 0, background: "transparent", cursor: "pointer", color, padding: 4, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
      <span style={{ display: "inline-block", fontSize: 11, lineHeight: 1, transform: open ? "rotate(0deg)" : "rotate(90deg)", transition: "transform .15s ease" }}>▼</span>
    </button>
  );
}

export function SystemPromptCard({ prompt, clawId, onSaved }: { prompt: string; clawId?: string; onSaved?: () => void }) {
  const [open, setOpen] = useState(true);
  const display = prompt?.trim() ? <MarkdownText text={prompt} baseSize={14} /> : <p style={{ fontSize: 13, color: "#6a6a72", margin: 0 }}>No system prompt set.</p>;
  return (
    <div style={{ borderRadius: 12, background: "#0f0f13", border: "1px solid rgba(255,111,97,.3)", padding: "16px 18px", boxShadow: "0 8px 22px rgba(0,0,0,.4)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: open ? 13 : 0 }}>
        <span style={{ width: 26, height: 26, flex: "none", borderRadius: 7, background: "rgba(255,111,97,.18)", border: "1px solid rgba(255,111,97,.35)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#ff8a7a" }}><ScrollText size={15} /></span>
        <span style={{ fontFamily: mono, fontSize: 12.5, fontWeight: 600, letterSpacing: ".05em", color: "#ff8a7a" }}>SYSTEM PROMPT</span>
        <span style={{ flex: 1 }} />
        <CollapseTick open={open} color="#ff8a7a" onClick={() => setOpen((o) => !o)} />
      </div>
      {open ? (
        clawId ? (
          <EditableSection clawId={clawId} field="system_prompt" value={prompt ?? ""} onSaved={onSaved} placeholder="System prompt / job description…">{display}</EditableSection>
        ) : display
      ) : null}
    </div>
  );
}

// Personality is often stored as JSON (traits/tone/…). Render it as labeled
// sections instead of dumping raw JSON; fall back to tags / text otherwise.
export function PersonalityBody({ raw, fallback }: { raw: string | null | undefined; fallback: string[] }) {
  const tags = (arr: string[]) => <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>{arr.map((p, i) => <span key={i} style={tag("#c98af0")}>{p}</span>)}</div>;
  const trimmed = (raw ?? "").trim();
  let parsed: unknown;
  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
    try { parsed = JSON.parse(trimmed); } catch { parsed = undefined; }
  }
  if (Array.isArray(parsed)) return tags(parsed.map((x) => String(x)));
  if (parsed && typeof parsed === "object") {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {Object.entries(parsed as Record<string, unknown>).map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: mono, fontSize: 10.5, letterSpacing: ".08em", color: "#b9a6e0", marginBottom: 5, textTransform: "uppercase" }}>{k.replace(/_/g, " ")}</div>
            {Array.isArray(v)
              ? tags(v.map((x) => String(x)))
              : v && typeof v === "object"
                ? <div style={{ display: "flex", flexDirection: "column", gap: 3, fontSize: 13, color: "#cfcfd5", lineHeight: 1.55 }}>{Object.entries(v as Record<string, unknown>).map(([kk, vv]) => <div key={kk}><span style={{ color: "#8a8a92" }}>{kk}:</span> {String(vv)}</div>)}</div>
                : <div style={{ fontSize: 13.5, color: "#d6d6dc", lineHeight: 1.55 }}>{String(v)}</div>}
          </div>
        ))}
      </div>
    );
  }
  if (fallback.length) return tags(fallback);
  if (trimmed) return <div style={{ fontSize: 13.5, color: "#d6d6dc", lineHeight: 1.6 }}>{trimmed}</div>;
  return <span style={{ fontSize: 12, color: "#6a6a72" }}>—</span>;
}

export function AnatomyCard({ tint, label, count, icon, collapsible, children }: { tint: string; label: string; count?: string; icon?: React.ReactNode; collapsible?: boolean; children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  const collapsed = !!collapsible && !open;
  return (
    <div style={{ width: "100%" }}>
      <div style={{ boxSizing: "border-box", display: "flex", flexDirection: "column", borderRadius: 12, background: "#0f0f13", border: `1px solid ${tint}38`, padding: 12, boxShadow: "0 8px 22px rgba(0,0,0,.4)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: collapsed ? 0 : 11 }}>
          <span style={{ width: 26, height: 26, flex: "none", borderRadius: 7, background: `${tint}26`, border: `1px solid ${tint}40`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: tint }}>{icon}</span>
          <span style={{ fontFamily: mono, fontSize: 12.5, fontWeight: 600, letterSpacing: ".05em", color: tint }}>{label}</span>
          {count || collapsible ? <span style={{ flex: 1 }} /> : null}
          {count ? <span style={{ fontFamily: mono, fontSize: 10, color: "#5a5a62" }}>{count}</span> : null}
          {collapsible ? <CollapseTick open={open} color={tint} onClick={() => setOpen((o) => !o)} /> : null}
        </div>
        {!collapsed ? <div>{children}</div> : null}
      </div>
    </div>
  );
}

// A pill-shaped tag, tinted to its section's accent. `dim` is the muted "+N" variant.
export const tag = (color = "#9a9aa2", dim = false): CSSProperties => ({ fontFamily: mono, fontSize: 12, color: dim ? "#8a8a92" : color, padding: "4px 10px", borderRadius: 7, background: dim ? "rgba(255,255,255,.04)" : `${color}1f`, border: `1px solid ${dim ? "rgba(255,255,255,.08)" : `${color}45`}` });