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

const KINDS = [
  { value: "opencode", label: "OpenCode" },
  { value: "openclaw", label: "OpenClaw" },
  { value: "hermes", label: "Hermes Agent" },
];

const METHODS = [
  { value: "systemd", label: "systemd", hint: "service unit /etc/systemd/system/<unit>" },
  { value: "docker", label: "Docker", hint: "tên container đã tồn tại" },
  { value: "pm2", label: "PM2", hint: "tên process (vd 'chopper' hoặc 'onepiece:chopper' nếu pm2 chạy dưới user khác)" },
  { value: "manual", label: "Thủ công", hint: "AM chỉ probe version + tail log file" },
];

export default function NewAgentForm({ hosts }: { hosts: { id: string; name: string; host: string }[] }) {
  const router = useRouter();
  const [mode, setMode] = useState<"managed" | "declared">("managed");
  const [name, setName] = useState("");
  const [kind, setKind] = useState("hermes");
  const [hostId, setHostId] = useState(hosts[0]?.id || "");
  const [installPath, setInstallPath] = useState("/opt");
  const [autoStart, setAutoStart] = useState(false);
  const [notes, setNotes] = useState("");
  const [deployMethod, setDeployMethod] = useState("systemd");
  const [deployRef, setDeployRef] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  const declared = mode === "declared";
  const refRequired = declared && deployMethod !== "systemd";

  function refPlaceholder() {
    switch (deployMethod) {
      case "systemd": return `để trống → agent-${name || "<name>"}.service`;
      case "docker": return "vd: opencode-main";
      case "pm2": return "vd: chopper hoặc onepiece:chopper (user:proc)";
      case "manual": return "vd: /var/log/agent.log (đường dẫn log để tail)";
      default: return "";
    }
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    if (hosts.length === 0) {
      setErr("Bạn cần thêm ít nhất 1 host trước.");
      return;
    }
    if (refRequired && !deployRef.trim()) {
      setErr(`Khai báo agent có sẵn với ${deployMethod} cần điền tên unit/container/process.`);
      return;
    }
    setBusy(true);
    const r = await fetch("/api/agents", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name, kind, hostId, installPath, notes, autoStart,
        declared, deployMethod, deployRef,
      }),
    });
    setBusy(false);
    if (!r.ok) {
      const j = await r.json().catch(() => ({}));
      setErr(j.error || "Tạo thất bại");
      return;
    }
    const { id } = await r.json();
    router.push(`/agents/${id}`);
  }

  return (
    <form className="space-y-4" onSubmit={submit}>
      <div className="grid grid-cols-2 gap-2">
        <button
          type="button"
          onClick={() => setMode("managed")}
          className={`p-3 rounded border text-left ${mode === "managed" ? "border-accent bg-panel2" : "border-border bg-panel"}`}
        >
          <div className="font-medium text-sm">Cài qua AM</div>
          <div className="text-xs text-muted mt-1">AM tự cài binary + tạo systemd unit + quản lý lifecycle.</div>
        </button>
        <button
          type="button"
          onClick={() => setMode("declared")}
          className={`p-3 rounded border text-left ${mode === "declared" ? "border-accent bg-panel2" : "border-border bg-panel"}`}
        >
          <div className="font-medium text-sm">Khai báo agent có sẵn</div>
          <div className="text-xs text-muted mt-1">Agent đã chạy ngoài AM (Docker/PM2/systemd thủ công). AM chỉ theo dõi.</div>
        </button>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="label">Tên agent (a-z, 0-9, _, -)</label>
          <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="vd: hermes-prod-1" required />
        </div>
        <div>
          <label className="label">Loại</label>
          <select className="input" value={kind} onChange={(e) => setKind(e.target.value)}>
            {KINDS.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
          </select>
        </div>
      </div>

      <div>
        <label className="label">Host (máy chạy)</label>
        {hosts.length === 0 ? (
          <div className="text-sm text-warn">Chưa có host. Vào /hosts để thêm.</div>
        ) : (
          <select className="input" value={hostId} onChange={(e) => setHostId(e.target.value)}>
            {hosts.map((h) => <option key={h.id} value={h.id}>{h.name} ({h.host})</option>)}
          </select>
        )}
      </div>

      <div>
        <label className="label">Phương pháp Deploy</label>
        <select className="input" value={deployMethod} onChange={(e) => setDeployMethod(e.target.value)}>
          {METHODS.map((m) => (
            <option key={m.value} value={m.value} disabled={!declared && m.value !== "systemd"}>
              {m.label} — {m.hint}{!declared && m.value !== "systemd" ? " (chỉ khi khai báo)" : ""}
            </option>
          ))}
        </select>
      </div>

      {(declared || deployMethod !== "systemd") && (
        <div>
          <label className="label">
            Tên unit / container / process {refRequired && <span className="text-bad">*</span>}
          </label>
          <input
            className="input font-mono"
            value={deployRef}
            onChange={(e) => setDeployRef(e.target.value)}
            placeholder={refPlaceholder()}
          />
        </div>
      )}

      {!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 className="text-xs text-muted mt-1">Workdir thực: <span className="font-mono">{installPath}/{name || "<name>"}</span></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 (systemd enable)
          </label>
        </>
      )}

      <div>
        <label className="label">Ghi chú</label>
        <textarea className="input min-h-[80px]" value={notes} onChange={(e) => setNotes(e.target.value)} />
      </div>

      {err && <div className="text-sm text-bad">{err}</div>}
      <button className="btn btn-primary" type="submit" disabled={busy}>
        {busy ? "Đang tạo..." : declared ? "Khai báo agent" : "Tạo agent"}
      </button>
    </form>
  );
}