"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

type Initial = {
  id: string;
  name: string;
  displayName: string | null;
  kind: string;
  hostId: string;
  hostName: string;
  hostAddr: string;
  installPath: string;
  status: string;
  version: string | null;
  pid: number | null;
  autoStart: boolean;
  notes: string | null;
  configJson: string;
  declared: boolean;
  deployMethod: string;
  deployRef: string;
  uptimeSec: number | null;
  restartCount: number | null;
  updatedAt: string;
};

type EventRow = {
  id: string;
  kind: string;
  status: string;
  message: string;
  log: string;
  durationMs: number | null;
  createdAt: string;
};

export default function AgentDetailClient({ initial }: { initial: Initial }) {
  const router = useRouter();
  const [tab, setTab] = useState<"overview" | "config" | "provider" | "logs" | "events">("overview");
  const [agent, setAgent] = useState(initial);
  const [running, setRunning] = useState<string>(""); // tên action đang chạy
  const [actionLog, setActionLog] = useState<string>("");
  const [events, setEvents] = useState<EventRow[]>([]);
  const [logsText, setLogsText] = useState<string>("");

  // form chỉnh sửa
  const [displayName, setDisplayName] = useState(initial.displayName || "");
  const [installPath, setInstallPath] = useState(initial.installPath);
  const [notes, setNotes] = useState(initial.notes || "");
  const [autoStart, setAutoStart] = useState(initial.autoStart);
  const [configJson, setConfigJson] = useState(initial.configJson);
  const [deployMethod, setDeployMethod] = useState(initial.deployMethod);
  const [deployRef, setDeployRef] = useState(initial.deployRef);
  const [workspace, setWorkspace] = useState<string>(() => {
    try { return (JSON.parse(initial.configJson || "{}").workspace as string) || ""; } catch { return ""; }
  });

  // Provider config tab
  type ProviderState = {
    loaded: boolean;
    loading: boolean;
    exists: boolean;
    path: string;
    format: string;
    user: string;
    tried: string[];
    error?: string;
    fields: {
      provider?: string;
      baseURL?: string;
      apiKey?: string;
      model?: string;
      fallbackModel?: string;
      telegramToken?: string;
      webhook?: string;
      webhookToken?: string;
      workspace?: string;
    };
    rawContent: string;
    showRaw: boolean;
    saveMsg?: string;
  };
  const [prov, setProv] = useState<ProviderState>({
    loaded: false, loading: false, exists: false, path: "", format: "", user: "",
    tried: [], fields: {}, rawContent: "", showRaw: false,
  });

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

  async function refreshEvents() {
    const r = await fetch(`/api/agents/${agent.id}/events?take=30`);
    if (r.ok) {
      const j = await r.json();
      setEvents(j.events);
    }
  }

  async function reloadAgent() {
    const r = await fetch(`/api/agents/${agent.id}`);
    if (r.ok) {
      const { agent: a } = await r.json();
      setAgent({
        ...agent,
        status: a.status,
        version: a.version,
        pid: a.pid,
        updatedAt: a.updatedAt,
      });
    }
  }

  async function doAction(action: string) {
    if (action === "uninstall" && !confirm(`Gỡ cài ${agent.name}? Workdir và systemd unit sẽ bị xoá.`)) return;
    setRunning(action);
    setActionLog(`==> ${action}\n`);
    const r = await fetch(`/api/agents/${agent.id}/action`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action }),
    });
    const j = await r.json().catch(() => ({}));
    setActionLog((prev) => prev + (j.log || JSON.stringify(j)));
    setRunning("");
    if (action === "logs") {
      setLogsText(j.log || "");
      setTab("logs");
    }
    await reloadAgent();
    await refreshEvents();
  }

  async function saveEdit() {
    setRunning("save");
    const r = await fetch(`/api/agents/${agent.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ displayName: displayName.trim() || null, installPath, notes, autoStart, configJson, deployMethod, deployRef }),
    });
    setRunning("");
    if (!r.ok) {
      alert("Lưu thất bại");
      return;
    }
    setAgent({ ...agent, displayName: displayName.trim() || null, installPath, notes, configJson, autoStart, deployMethod, deployRef });
    alert("Đã lưu");
  }

  async function remove() {
    if (!confirm(`XOÁ agent "${agent.name}"? Sẽ thử uninstall trên host trước.`)) return;
    const r = await fetch(`/api/agents/${agent.id}`, { method: "DELETE" });
    if (r.ok) router.push("/agents");
    else alert("Xoá thất bại");
  }

  async function loadProvider() {
    setProv({ ...prov, loading: true, saveMsg: undefined });
    const r = await fetch(`/api/agents/${agent.id}/config-file`);
    const j = await r.json().catch(() => ({}));
    setProv({
      loaded: true,
      loading: false,
      exists: !!j.exists,
      path: j.path || "",
      format: j.format || "",
      user: j.user || "",
      tried: j.tried || [],
      error: j.error,
      fields: j.fields || {},
      rawContent: j.content || "",
      showRaw: false,
    });
    // Đồng bộ workspace từ config file → form Cấu hình
    if (j.fields?.workspace && !workspace) setWorkspace(j.fields.workspace);
  }

  function setProvField<K extends keyof ProviderState["fields"]>(k: K, v: string) {
    setProv((p) => ({ ...p, fields: { ...p.fields, [k]: v }, saveMsg: undefined }));
  }

  async function saveProviderFields() {
    setProv({ ...prov, loading: true, saveMsg: undefined });
    const r = await fetch(`/api/agents/${agent.id}/config-file`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ mode: "fields", fields: prov.fields }),
    });
    const j = await r.json().catch(() => ({}));
    setProv((p) => ({
      ...p, loading: false,
      saveMsg: r.ok ? `✓ Đã ghi ${j.path || ""}${j.warnings?.length ? ` (${j.warnings.length} warning)` : ""}` : `✗ ${j.error || "lỗi"}`,
    }));
  }

  async function saveProviderRaw() {
    setProv({ ...prov, loading: true, saveMsg: undefined });
    const r = await fetch(`/api/agents/${agent.id}/config-file`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ mode: "raw", content: prov.rawContent }),
    });
    const j = await r.json().catch(() => ({}));
    setProv((p) => ({
      ...p, loading: false,
      saveMsg: r.ok ? `✓ Đã ghi ${j.path || ""}` : `✗ ${j.error || "lỗi"}`,
    }));
  }

  useEffect(() => {
    if (tab === "provider" && !prov.loaded && !prov.loading) loadProvider();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tab]);

  return (
    <div className="space-y-4">
      <div className="card p-4 grid grid-cols-2 lg:grid-cols-6 gap-3 text-sm">
        <Field label="Trạng thái" value={agent.status} />
        <Field label="Phiên bản" value={agent.version || "-"} mono />
        <Field label="PID" value={agent.pid || "-"} mono />
        <Field label="Uptime" value={fmtUptime(agent.uptimeSec)} />
        <Field label="Restart" value={agent.restartCount ?? "-"} />
        <Field label="Host" value={`${agent.hostName} (${agent.hostAddr})`} mono />
        <Field
          label="Deploy"
          value={
            <span className="font-mono text-xs">
              {agent.deployMethod}{agent.declared ? " · khai báo" : ""}
              {agent.deployRef && <div className="text-muted">{agent.deployRef}</div>}
            </span>
          }
        />
        <Field label="Workspace" value={workspace || "-"} mono />
      </div>

      <div className="flex flex-wrap gap-2">
        <Btn label="Kiểm tra" running={running === "status"} onClick={() => doAction("status")} />
        {!agent.declared && agent.deployMethod === "systemd" && (
          <>
            <Btn label="Cài đặt" running={running === "install"} onClick={() => doAction("install")} primary />
            <Btn label="Cập nhật" running={running === "update"} onClick={() => doAction("update")} />
          </>
        )}
        <Btn label="Khởi động" running={running === "start"} onClick={() => doAction("start")} />
        <Btn label="Restart" running={running === "restart"} onClick={() => doAction("restart")} />
        <Btn label="Dừng" running={running === "stop"} onClick={() => doAction("stop")} />
        <Btn label="Xem log" running={running === "logs"} onClick={() => doAction("logs")} />
        {!agent.declared && (
          <Btn label="Gỡ cài" running={running === "uninstall"} onClick={() => doAction("uninstall")} danger />
        )}
        <button className="btn btn-danger ml-auto" onClick={remove}>Xoá agent</button>
      </div>

      <div className="flex gap-1 border-b border-border">
        {(["overview", "config", "provider", "logs", "events"] as const).map((t) => (
          <button
            key={t}
            className={`px-3 py-1.5 text-sm border-b-2 -mb-px ${tab === t ? "border-accent text-ink" : "border-transparent text-muted"}`}
            onClick={() => setTab(t)}
          >
            {t === "overview" ? "Tổng quan"
              : t === "config" ? "Cấu hình"
              : t === "provider" ? "Provider"
              : t === "logs" ? "Log" : "Sự kiện"}
          </button>
        ))}
      </div>

      {tab === "overview" && (
        <div className="card p-5">
          <h2 className="font-medium mb-3">Output thao tác gần nhất</h2>
          <pre className="text-xs font-mono bg-bg p-3 rounded border border-border whitespace-pre-wrap min-h-[120px]">
            {actionLog || "(chưa thao tác)"}
          </pre>
        </div>
      )}

      {tab === "config" && (
        <div className="card p-5 space-y-3 max-w-2xl">
          <div>
            <label className="label">Phương pháp Deploy</label>
            <select className="input" value={deployMethod} onChange={(e) => setDeployMethod(e.target.value)}>
              <option value="systemd">systemd</option>
              <option value="docker">Docker</option>
              <option value="pm2">PM2</option>
              <option value="manual">Thủ công</option>
            </select>
          </div>
          <div>
            <label className="label">Tên unit / container / process / log path</label>
            <input
              className="input font-mono"
              value={deployRef}
              onChange={(e) => setDeployRef(e.target.value)}
              placeholder={`để trống → agent-${agent.name}.service (cho systemd)`}
            />
          </div>
          <div>
            <label className="label">
              Tên hiển thị
              <span className="text-muted ml-2 text-[10px] font-normal">(chỉ trong AM, không đổi tên unit/process)</span>
            </label>
            <input
              className="input"
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              placeholder={agent.name}
            />
            <div className="text-[10px] text-muted mt-1">
              Tên hệ thống (cố định): <span className="font-mono">{agent.name}</span>
            </div>
          </div>

          {!agent.declared && (
            <div>
              <label className="label">Thư mục cài đặt cha</label>
              <input className="input font-mono" value={installPath} onChange={(e) => setInstallPath(e.target.value)} />
            </div>
          )}
          <div>
            <label className="label">Workspace</label>
            <input
              className="input font-mono"
              value={workspace}
              readOnly
              disabled
            />
            <div className="text-xs text-muted mt-1">
              Đường dẫn workspace (chỉ đọc — sửa qua tab Provider hoặc trực tiếp file config trên host).
            </div>
          </div>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" checked={autoStart} onChange={(e) => setAutoStart(e.target.checked)} />
            Tự khởi động cùng host
          </label>
          <div>
            <label className="label">Cấu hình (JSON)</label>
            <textarea className="input font-mono min-h-[140px]" value={configJson} onChange={(e) => setConfigJson(e.target.value)} />
            <div className="text-xs text-muted mt-1">VD: {`{"OPENCODE_PORT":4096,"OPENROUTER_API_KEY":"sk-..."}`}</div>
          </div>
          <div>
            <label className="label">Ghi chú</label>
            <textarea className="input min-h-[80px]" value={notes} onChange={(e) => setNotes(e.target.value)} />
          </div>
          <button className="btn btn-primary" onClick={saveEdit} disabled={running === "save"}>
            {running === "save" ? "Đang lưu..." : "Lưu"}
          </button>
          <button className="btn ml-2" onClick={() => doAction("restart")} disabled={running === "restart"}>
            {running === "restart" ? "Restart..." : "Restart agent"}
          </button>
        </div>
      )}

      {tab === "provider" && (
        <div className="card p-5 space-y-3 max-w-3xl">
          <div className="flex items-center gap-2 flex-wrap">
            <h2 className="font-medium">Cấu hình Provider</h2>
            <button className="btn ml-auto" onClick={loadProvider} disabled={prov.loading}>
              {prov.loading ? "Đang tải..." : "Tải lại"}
            </button>
            <button className="btn" onClick={() => setProv({ ...prov, showRaw: !prov.showRaw })}>
              {prov.showRaw ? "Ẩn raw" : "Sửa raw"}
            </button>
            <button className="btn" onClick={() => doAction("restart")} disabled={running === "restart"}>
              {running === "restart" ? "Restart..." : "Restart agent"}
            </button>
          </div>

          {!prov.loaded && !prov.loading && (
            <div className="text-sm text-muted">Bấm Tải lại để fetch config từ host.</div>
          )}

          {prov.loaded && (
            <>
              <div className="text-xs text-muted space-y-0.5">
                <div>File: <span className="font-mono">{prov.path || "-"}</span> ({prov.format || "?"}) · user: <span className="font-mono">{prov.user || "root"}</span></div>
                <div>Trạng thái: {prov.exists ? "✓ tồn tại" : "✗ chưa có (sẽ tạo mới khi lưu)"}</div>
                {prov.tried.length > 1 && (
                  <details className="mt-1">
                    <summary className="cursor-pointer">Đường dẫn đã thử ({prov.tried.length})</summary>
                    <ul className="ml-4 mt-1 list-disc">
                      {prov.tried.map((p) => <li key={p} className="font-mono">{p}</li>)}
                    </ul>
                  </details>
                )}
                {prov.error && <div className="text-bad">Lỗi đọc: {prov.error}</div>}
              </div>

              {!prov.showRaw ? (
                <div className="space-y-3">
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="label">Provider</label>
                      <input className="input font-mono" value={prov.fields.provider || ""}
                        placeholder="vd: openrouter / anthropic / openai"
                        onChange={(e) => setProvField("provider", e.target.value)} />
                    </div>
                    <div>
                      <label className="label">Base URL</label>
                      <input className="input font-mono" value={prov.fields.baseURL || ""}
                        placeholder="https://openrouter.ai/api/v1"
                        onChange={(e) => setProvField("baseURL", e.target.value)} />
                    </div>
                  </div>
                  <div>
                    <label className="label">API Key</label>
                    <input className="input font-mono" value={prov.fields.apiKey || ""}
                      placeholder="sk-or-v1-..."
                      onChange={(e) => setProvField("apiKey", e.target.value)} />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="label">Model chính</label>
                      <input className="input font-mono" value={prov.fields.model || ""}
                        placeholder="anthropic/claude-sonnet-4"
                        onChange={(e) => setProvField("model", e.target.value)} />
                    </div>
                    <div>
                      <label className="label">Model fallback</label>
                      <input className="input font-mono" value={prov.fields.fallbackModel || ""}
                        placeholder="anthropic/claude-haiku"
                        onChange={(e) => setProvField("fallbackModel", e.target.value)} />
                    </div>
                  </div>
                  <div>
                    <label className="label">Telegram bot token</label>
                    <input className="input font-mono" value={prov.fields.telegramToken || ""}
                      placeholder="1234567890:ABC..."
                      onChange={(e) => setProvField("telegramToken", e.target.value)} />
                  </div>
                  <div>
                    <label className="label">Webhook URL</label>
                    <input className="input font-mono" value={prov.fields.webhook || ""}
                      placeholder="https://..."
                      onChange={(e) => setProvField("webhook", e.target.value)} />
                  </div>
                  <div>
                    <label className="label">Webhook Key</label>
                    <input className="input font-mono" value={prov.fields.webhookToken || ""}
                      placeholder="webhook secret / token"
                      onChange={(e) => setProvField("webhookToken", e.target.value)} />
                  </div>
                  <div className="flex gap-2 items-center">
                    <button className="btn btn-primary" onClick={saveProviderFields} disabled={prov.loading}>
                      {prov.loading ? "Đang lưu..." : "Lưu provider"}
                    </button>
                    {prov.saveMsg && <div className="text-xs">{prov.saveMsg}</div>}
                  </div>
                  <div className="text-xs text-muted">
                    Lưu sẽ chỉnh trực tiếp file trên host (kèm backup .bak.{"<ts>"}). Để áp dụng, bấm Restart agent ở trên.
                  </div>
                </div>
              ) : (
                <div className="space-y-2">
                  <textarea className="input font-mono min-h-[320px] text-xs"
                    value={prov.rawContent}
                    onChange={(e) => setProv({ ...prov, rawContent: e.target.value, saveMsg: undefined })}
                  />
                  <div className="flex gap-2 items-center">
                    <button className="btn btn-primary" onClick={saveProviderRaw} disabled={prov.loading}>
                      {prov.loading ? "Đang lưu..." : "Lưu raw"}
                    </button>
                    {prov.saveMsg && <div className="text-xs">{prov.saveMsg}</div>}
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {tab === "logs" && (
        <div className="card p-5">
          <div className="flex items-center justify-between mb-2">
            <h2 className="font-medium">Log gần nhất</h2>
            <button className="btn" onClick={() => doAction("logs")}>Tải lại</button>
          </div>
          <pre className="text-xs font-mono bg-bg p-3 rounded border border-border whitespace-pre-wrap min-h-[260px] max-h-[600px] overflow-auto">
            {logsText || "(bấm Tải lại / Xem log để fetch 200 dòng cuối)"}
          </pre>
        </div>
      )}

      {tab === "events" && (
        <div className="card p-5">
          <h2 className="font-medium mb-3">Lịch sử sự kiện</h2>
          {events.length === 0 ? <div className="text-sm text-muted">Chưa có sự kiện.</div> : (
            <ul className="space-y-2">
              {events.map((e) => (
                <li key={e.id} className="border border-border rounded p-2">
                  <div className="flex items-center gap-2 text-sm">
                    <span className={`chip ${e.status === "ok" ? "border-ok text-ok" : "border-bad text-bad"}`}>{e.kind}</span>
                    <span className="text-muted">{e.message}</span>
                    <span className="text-muted text-xs ml-auto">{new Date(e.createdAt).toLocaleString("vi-VN")} · {e.durationMs}ms</span>
                  </div>
                  {e.log && (
                    <details className="mt-2">
                      <summary className="text-xs text-muted cursor-pointer">log</summary>
                      <pre className="text-xs font-mono bg-bg p-2 rounded mt-1 whitespace-pre-wrap max-h-[200px] overflow-auto">{e.log}</pre>
                    </details>
                  )}
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

function fmtUptime(sec: number | null): string {
  if (sec == null || sec < 0) return "-";
  const d = Math.floor(sec / 86400);
  const h = Math.floor((sec % 86400) / 3600);
  const m = Math.floor((sec % 3600) / 60);
  if (d > 0) return `${d}d ${h}h`;
  if (h > 0) return `${h}h ${m}m`;
  if (m > 0) return `${m}m`;
  return `${sec}s`;
}

function Field({ label, value, mono }: { label: string; value: React.ReactNode; mono?: boolean }) {
  return (
    <div>
      <div className="text-xs text-muted">{label}</div>
      <div className={`mt-0.5 ${mono ? "font-mono text-xs" : ""}`}>{value}</div>
    </div>
  );
}

function Btn({ label, onClick, running, primary, danger }: { label: string; onClick: () => void; running?: boolean; primary?: boolean; danger?: boolean }) {
  return (
    <button
      className={`btn ${primary ? "btn-primary" : ""} ${danger ? "btn-danger" : ""}`}
      onClick={onClick}
      disabled={!!running}
    >
      {running ? `${label}...` : label}
    </button>
  );
}