import React, { useEffect, useMemo, useState } from "react";

const DEFAULT_MEMORIES = [
  {
    id: "mem-001",
    title: "Session continuity",
    type: "thread",
    updatedAt: "2026-04-16",
    importance: "high",
    summary: "Maintains governor-specific thread continuity and active context."
  },
  {
    id: "mem-002",
    title: "Execution preference",
    type: "governance",
    updatedAt: "2026-04-16",
    importance: "high",
    summary: "AURA provides final closure before governed action is executed."
  }
];

const DEFAULT_MESSAGES = [
  {
    id: "msg-001",
    role: "assistant",
    content:
      "I am AURA. This governor shell is active and ready. You can brief, inspect, or launch direct mode."
  }
];

function safeArray(v, fallback = []) {
  return Array.isArray(v) ? v : fallback;
}

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}

function makeThreadId(nodeKey) {
  const rand = Math.random().toString(36).slice(2, 8).toUpperCase();
  return `${String(nodeKey || "NODE").toUpperCase()}-${rand}`;
}

function statusTone(status) {
  switch (status) {
    case "GOVERNED":
    case "READY":
    case "STABLE":
      return "bg-emerald-500/15 text-emerald-300 border-emerald-500/30";
    case "DEGRADED":
    case "WATCH":
      return "bg-amber-500/15 text-amber-300 border-amber-500/30";
    case "BLOCK":
    case "CRITICAL":
      return "bg-red-500/15 text-red-300 border-red-500/30";
    default:
      return "bg-slate-500/15 text-slate-300 border-slate-500/30";
  }
}

function governorTheme(nodeKey) {
  switch (nodeKey) {
    case "mars":
      return {
        accent: "text-cyan-300",
        border: "border-cyan-500/30",
        glow: "shadow-cyan-500/10"
      };
    case "mars":
      return {
        accent: "text-rose-300",
        border: "border-rose-500/30",
        glow: "shadow-rose-500/10"
      };
    case "neptune":
      return {
        accent: "text-indigo-300",
        border: "border-indigo-500/30",
        glow: "shadow-indigo-500/10"
      };
    case "saturn":
      return {
        accent: "text-amber-300",
        border: "border-amber-500/30",
        glow: "shadow-amber-500/10"
      };
    case "moon":
      return {
        accent: "text-violet-300",
        border: "border-violet-500/30",
        glow: "shadow-violet-500/10"
      };
    case "sun":
      return {
        accent: "text-yellow-300",
        border: "border-yellow-500/30",
        glow: "shadow-yellow-500/10"
      };
    case "earth":
      return {
        accent: "text-emerald-300",
        border: "border-emerald-500/30",
        glow: "shadow-emerald-500/10"
      };
    case "pluto":
      return {
        accent: "text-fuchsia-300",
        border: "border-fuchsia-500/30",
        glow: "shadow-fuchsia-500/10"
      };
    default:
      return {
        accent: "text-sky-300",
        border: "border-sky-500/30",
        glow: "shadow-sky-500/10"
      };
  }
}

function DefaultDirectPanel({ node, metrics, onLaunchAction }) {
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Live Metrics</div>
        <div className="grid grid-cols-2 gap-3 text-sm">
          {safeArray(metrics).map((m) => (
            <div key={m.label} className="rounded-xl bg-black/20 p-3">
              <div className="text-white/50">{m.label}</div>
              <div className="mt-1 text-lg font-semibold text-white">{m.value}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">
          Direct Actions
        </div>
        <div className="grid gap-3">
          {safeArray(node.directActions).map((action) => (
            <button
              key={action.key}
              onClick={() => onLaunchAction(action)}
              className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-left text-sm text-white transition hover:bg-black/30"
            >
              <div className="font-medium">{action.label}</div>
              <div className="mt-1 text-white/50">{action.description}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function DefaultMemoryTable({ memories }) {
  return (
    <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
      <div className="border-b border-white/10 px-4 py-3 text-sm font-semibold text-white/80">
        Memory Rail
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead className="bg-black/20 text-white/50">
            <tr>
              <th className="px-4 py-3 text-left font-medium">Title</th>
              <th className="px-4 py-3 text-left font-medium">Type</th>
              <th className="px-4 py-3 text-left font-medium">Importance</th>
              <th className="px-4 py-3 text-left font-medium">Updated</th>
            </tr>
          </thead>
          <tbody>
            {safeArray(memories).map((m) => (
              <tr key={m.id} className="border-t border-white/5 text-white/80">
                <td className="px-4 py-3">
                  <div className="font-medium">{m.title}</div>
                  <div className="mt-1 text-xs text-white/50">{m.summary}</div>
                </td>
                <td className="px-4 py-3">{m.type}</td>
                <td className="px-4 py-3">{m.importance}</td>
                <td className="px-4 py-3">{m.updatedAt}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function DefaultChatPanel({
  messages,
  input,
  setInput,
  onSend,
  threadId,
  nodeName,
  auraName
}) {
  return (
    <div className="flex h-full min-h-[420px] flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/5">
      <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
        <div>
          <div className="text-sm font-semibold text-white/90">
            {auraName} / {nodeName}
          </div>
          <div className="text-xs text-white/50">Thread ID: {threadId}</div>
        </div>
        <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
          Chat First
        </div>
      </div>

      <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
        {safeArray(messages).map((m) => (
          <div
            key={m.id}
            className={cx(
              "max-w-[88%] rounded-2xl px-4 py-3 text-sm",
              m.role === "assistant"
                ? "bg-slate-800 text-white"
                : "ml-auto bg-sky-900/60 text-white"
            )}
          >
            <div className="mb-1 text-[10px] uppercase tracking-wide text-white/40">
              {m.role === "assistant" ? auraName : "You"}
            </div>
            <div>{m.content}</div>
          </div>
        ))}
      </div>

      <div className="border-t border-white/10 p-3">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder={`Speak to ${auraName} in ${nodeName} mode...`}
            className="flex-1 rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
          />
          <button
            onClick={onSend}
            className="rounded-xl bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-white/90"
          >
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

export default function NodeShell({
  node = {
    key: "mars",
    name: "Mars",
    subtitle: "Capital Governor",
    auraName: "AURA",
    status: "READY",
    description:
      "Independent governor node with chat-first interaction, direct launch, memory continuity, and execution control.",
    briefing:
      "AURA is active in this governor. You can request a briefing, inspect the dashboard, or launch direct mode.",
    directActions: [
      {
        key: "dashboard",
        label: "Open Dashboard",
        description: "Bypass chat and open the active governor dashboard."
      },
      {
        key: "signals",
        label: "Show Signals",
        description: "Open current governed signal view."
      },
      {
        key: "execution",
        label: "Execution Panel",
        description: "Open governed execution controls."
      }
    ]
  },
  initialMessages = DEFAULT_MESSAGES,
  initialMemories = DEFAULT_MEMORIES,
  metrics = [
    { label: "Admissibility", value: "0.74" },
    { label: "Coherence", value: "0.81" },
    { label: "Thread State", value: "Active" },
    { label: "Execution", value: "Guarded" }
  ],
  renderDirectPanel,
  renderMemoryPanel,
  onLaunchAction,
  onSendMessage
}) {
  const theme = useMemo(() => governorTheme(node.key), [node.key]);
  const [threadId] = useState(() => makeThreadId(node.key));
  const [messages, setMessages] = useState(initialMessages);
  const [memories] = useState(initialMemories);
  const [input, setInput] = useState("");
  const [mode, setMode] = useState("briefing");

  useEffect(() => {
    setMessages(initialMessages);
  }, [initialMessages]);

  function handleLaunchAction(action) {
    if (action && action.key) {
      setMode(action.key);
    }
    if (typeof onLaunchAction === "function") {
      onLaunchAction({
        action,
        node,
        threadId
      });
    }
  }

  function handleSend() {
    const trimmed = String(input || "").trim();
    if (!trimmed) return;

    const userMessage = {
      id: `user-${Date.now()}`,
      role: "user",
      content: trimmed
    };

    const assistantMessage = {
      id: `assistant-${Date.now() + 1}`,
      role: "assistant",
      content:
        typeof onSendMessage === "function"
          ? onSendMessage({
              text: trimmed,
              node,
              threadId,
              mode
            }) || `AURA received your request in ${node.name} mode.`
          : `AURA received your request in ${node.name} mode.`
    };

    setMessages((prev) => [...prev, userMessage, assistantMessage]);
    setInput("");
  }

  return (
    <div className="min-h-screen bg-[#050816] text-white">
      <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <div
          className={cx(
            "mb-6 rounded-3xl border bg-white/[0.03] p-5 shadow-2xl",
            theme.border,
            theme.glow
          )}
        >
          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <div className={cx("text-xs font-semibold uppercase tracking-[0.24em]", theme.accent)}>
                {node.auraName || "AURA"} / {node.name}
              </div>
              <h1 className="mt-2 text-3xl font-semibold tracking-tight">
                {node.subtitle || node.name}
              </h1>
              <p className="mt-3 max-w-3xl text-sm text-white/60">
                {node.description}
              </p>
            </div>

            <div className="flex flex-wrap gap-2">
              <div
                className={cx(
                  "rounded-full border px-3 py-1 text-xs",
                  statusTone(node.status)
                )}
              >
                {node.status}
              </div>
              <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
                Thread: {threadId}
              </div>
              <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
                Mode: {mode}
              </div>
            </div>
          </div>
        </div>

        <div className="mb-6 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
          <DefaultChatPanel
            messages={messages}
            input={input}
            setInput={setInput}
            onSend={handleSend}
            threadId={threadId}
            nodeName={node.name}
            auraName={node.auraName || "AURA"}
          />

          <div className="space-y-6">
            <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
              <div className="mb-2 text-sm font-semibold text-white/80">
                Governor Briefing
              </div>
              <div className="text-sm text-white/60">{node.briefing}</div>

              <div className="mt-4 flex flex-wrap gap-2">
                <button
                  onClick={() => setMode("briefing")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "briefing"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Briefing
                </button>
                <button
                  onClick={() => setMode("dashboard")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "dashboard"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Direct
                </button>
                <button
                  onClick={() => setMode("memory")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "memory"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Memory
                </button>
              </div>
            </div>

            <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
              <div className="mb-3 text-sm font-semibold text-white/80">
                System Strip
              </div>
              <div className="grid grid-cols-2 gap-3 text-sm">
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Governor</div>
                  <div className="mt-1 font-medium text-white">{node.name}</div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">AURA Identity</div>
                  <div className="mt-1 font-medium text-white">
                    {node.auraName || "AURA"}
                  </div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Thread</div>
                  <div className="mt-1 font-medium text-white">{threadId}</div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Status</div>
                  <div className="mt-1 font-medium text-white">{node.status}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {mode === "memory" ? (
            renderMemoryPanel ? (
              renderMemoryPanel({ node, memories, threadId })
            ) : (
              <DefaultMemoryTable memories={memories} />
            )
          ) : renderDirectPanel ? (
            renderDirectPanel({
              node,
              metrics,
              mode,
              threadId,
              onLaunchAction: handleLaunchAction
            })
          ) : (
            <DefaultDirectPanel
              node={node}
              metrics={metrics}
              onLaunchAction={handleLaunchAction}
            />
          )}
        </div>
      </div>
    </div>
  );
}