"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Copy, ExternalLink, Eye, EyeOff, KeyRound, Loader2, Plus } from "lucide-react";
import { Button, Label } from "@/components/ui";

type CreatedInstance = {
  subdomain: string;
};

type Role = {
  id: number;
  name: string;
  name_ar: string | null;
  description: string | null;
  icon: string | null;
};

type Credentials = {
  username: string;
  password: string;
};

function instanceUrl(subdomain: string) {
  const localHost = subdomain.endsWith(".localhost") || subdomain === "localhost" || subdomain.endsWith(".127.0.0.1.nip.io");
  return `${localHost ? "http" : "https"}://${subdomain}`;
}

type Option = { key: string; label_ar: string; label_en: string };
type Candidate = { name: string; gender: string; nationality: string; nationality_label: string; language: string; bio: string; avatar?: string };

const AVATAR_COLORS = ["bg-cyan-600", "bg-violet-600", "bg-amber-600", "bg-emerald-600", "bg-rose-600"];

export function NewInstanceForm() {
  const router = useRouter();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [created, setCreated] = useState<{ instance: CreatedInstance; credentials: Credentials } | null>(null);
  const [showPassword, setShowPassword] = useState(true);
  const [copied, setCopied] = useState("");
  const [roles, setRoles] = useState<Role[]>([]);
  const [roleId, setRoleId] = useState<number | null>(null);
  const [notes, setNotes] = useState("");

  // Persona hiring flow: pick gender/nationality/language -> pick a candidate.
  const [gender, setGender] = useState<"male" | "female">("male");
  const [nationalities, setNationalities] = useState<Option[]>([]);
  const [languages, setLanguages] = useState<Option[]>([]);
  const [nationality, setNationality] = useState("saudi");
  const [language, setLanguage] = useState("Arabic");
  const [candidates, setCandidates] = useState<Candidate[]>([]);
  const [candidate, setCandidate] = useState<Candidate | null>(null);
  const [fetchingCandidates, setFetchingCandidates] = useState(false);

  useEffect(() => {
    fetch("/api/agent-roles")
      .then((r) => r.json())
      .then((b) => setRoles(b.roles || []))
      .catch(() => {});
    fetch("/api/personas/candidates")
      .then((r) => r.json())
      .then((b) => {
        setNationalities(b.nationalities || []);
        setLanguages(b.languages || []);
      })
      .catch(() => {});
  }, []);

  async function loadCandidates() {
    setFetchingCandidates(true);
    setError("");
    setCandidate(null);
    try {
      const res = await fetch("/api/personas/candidates", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ gender, nationality, language })
      });
      const b = await res.json();
      if (!res.ok) throw new Error(b.error || "تعذر جلب المرشحين.");
      setCandidates(b.candidates || []);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setFetchingCandidates(false);
    }
  }

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!candidate) {
      setError("اعرض المرشحين واختر موظفك أولاً.");
      return;
    }
    setLoading(true);
    setError("");
    const response = await fetch("/api/instances", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: candidate.name,
        agent_role_id: roleId ?? undefined,
        notes: notes.trim() || undefined,
        persona: {
          gender: candidate.gender,
          nationality: candidate.nationality_label,
          language: candidate.language,
          bio: candidate.bio
        }
      })
    });
    const body = (await response.json()) as { instance?: CreatedInstance; credentials?: Credentials; error?: string };
    setLoading(false);

    if (!response.ok) {
      setError(body.error || "Provisioning failed.");
      return;
    }

    if (body.instance && body.credentials) {
      setCreated({ instance: body.instance, credentials: body.credentials });
      setShowPassword(true);
    }
    setRoleId(null);
    setNotes("");
    setCandidates([]);
    setCandidate(null);
    router.refresh();
  }

  async function copyValue(label: string, value: string) {
    await navigator.clipboard.writeText(value);
    setCopied(label);
    window.setTimeout(() => setCopied(""), 1500);
  }

  return (
    <>
      <form onSubmit={onSubmit} className="grid gap-3" dir="rtl">
        {roles.length > 0 && (
          <div>
            <Label>Choose a job</Label>
            <div className="mt-1 grid grid-cols-2 gap-2">
              {roles.map((r) => {
                const selected = roleId === r.id;
                return (
                  <button
                    type="button"
                    key={r.id}
                    onClick={() => setRoleId(selected ? null : r.id)}
                    className={`flex items-start gap-2 rounded-lg border p-3 text-left transition ${
                      selected ? "border-brand bg-brand/5 ring-1 ring-brand" : "border-slate-200 hover:border-slate-300"
                    }`}
                  >
                    {r.icon && (r.icon.startsWith("/") || r.icon.startsWith("http")) ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={r.icon} alt="" className="h-9 w-9 shrink-0 rounded-md object-cover" />
                    ) : (
                      <span className="text-xl leading-none">{r.icon || "💼"}</span>
                    )}
                    <span>
                      <span className="block text-sm font-semibold text-ink">{r.name_ar || r.name}</span>
                      {r.description && <span className="block text-xs text-slate-500">{r.description}</span>}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* Persona: gender + nationality + language instead of typing a name */}
        <div className="grid gap-3 rounded-lg border border-slate-200 p-3">
          <p className="text-sm font-semibold text-ink">مواصفات موظفك</p>
          <div className="grid grid-cols-3 gap-2">
            <div>
              <Label>الجنس</Label>
              <div className="mt-1 flex gap-1">
                {(["male", "female"] as const).map((g) => (
                  <button
                    key={g}
                    type="button"
                    onClick={() => setGender(g)}
                    className={`flex-1 rounded-md border px-2 py-2 text-sm ${gender === g ? "border-brand bg-brand/5 font-semibold text-brand" : "border-slate-200"}`}
                  >
                    {g === "male" ? "👨 رجل" : "👩 بنت"}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <Label htmlFor="nationality">الجنسية</Label>
              <select
                id="nationality"
                value={nationality}
                onChange={(e) => setNationality(e.target.value)}
                className="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-ink focus:border-brand focus:outline-none"
              >
                {nationalities.map((n) => (
                  <option key={n.key} value={n.key}>
                    {n.label_ar}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <Label htmlFor="language">لغة التواصل</Label>
              <select
                id="language"
                value={language}
                onChange={(e) => setLanguage(e.target.value)}
                className="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-ink focus:border-brand focus:outline-none"
              >
                {languages.map((l) => (
                  <option key={l.key} value={l.key}>
                    {l.label_ar}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <Button type="button" variant="secondary" onClick={loadCandidates} disabled={fetchingCandidates}>
            {fetchingCandidates ? <Loader2 size={16} className="animate-spin" /> : null}
            {fetchingCandidates ? "جارٍ البحث عن مرشحين..." : candidates.length > 0 ? "عرض مرشحين آخرين" : "عرض المرشحين المتاحين"}
          </Button>

          {candidates.length > 0 && (
            <div className="grid gap-2 sm:grid-cols-3">
              {candidates.map((c, i) => {
                const selected = candidate?.name === c.name;
                return (
                  <button
                    key={c.name}
                    type="button"
                    onClick={() => setCandidate(c)}
                    className={`rounded-lg border p-3 text-center transition ${selected ? "border-brand bg-brand/5 ring-1 ring-brand" : "border-slate-200 hover:border-slate-300"}`}
                  >
                    <span className={`mx-auto flex h-14 w-14 items-center justify-center rounded-full text-2xl font-bold text-white ${AVATAR_COLORS[i % AVATAR_COLORS.length]}`}>
                      {c.name.slice(0, 1)}
                    </span>
                    <span className="mt-2 block text-sm font-bold text-ink">{c.name}</span>
                    <span className="mt-1 block text-xs leading-5 text-slate-500">{c.bio}</span>
                    {selected && <span className="mt-2 inline-block rounded-full bg-brand px-3 py-0.5 text-xs font-semibold text-white">✓ اخترته</span>}
                  </button>
                );
              })}
            </div>
          )}
        </div>

        <div>
          <Label htmlFor="notes">ملاحظات لموظفك (اختياري)</Label>
          <textarea
            id="notes"
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            rows={3}
            placeholder="مثال: ركز على قواعد ضريبة القيمة المضافة السعودية، وأرسل لي ملخصاً كل يوم أحد…"
            className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-ink focus:border-brand focus:outline-none"
          />
        </div>

        {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
        <Button disabled={loading || !candidate}>
          <Plus size={16} />
          {loading ? "جارٍ التعيين..." : candidate ? `تعيين ${candidate.name}` : "اختر موظفاً للتعيين"}
        </Button>
      </form>
      {created && (
        <div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
              <p className="flex items-center gap-2 text-sm font-bold text-emerald-900">
                <KeyRound size={16} />
                Docker login created
              </p>
              <a
                href={instanceUrl(created.instance.subdomain)}
                target="_blank"
                className="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-800 hover:text-emerald-950"
              >
                {created.instance.subdomain}
                <ExternalLink size={14} />
              </a>
            </div>
            <Button type="button" variant="secondary" onClick={() => setShowPassword((value) => !value)}>
              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
              {showPassword ? "Hide password" : "Show password"}
            </Button>
          </div>
          <div className="mt-4 grid gap-3">
            <CreatedField label="Username" value={created.credentials.username} copied={copied === "username"} onCopy={() => copyValue("username", created.credentials.username)} />
            <CreatedField
              label="Password"
              value={showPassword ? created.credentials.password : "************"}
              copied={copied === "password"}
              onCopy={() => copyValue("password", created.credentials.password)}
            />
          </div>
        </div>
      )}
      {loading && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm">
          <div className="w-[min(92vw,520px)] rounded-xl bg-white p-8 text-center shadow-2xl">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-brand">
              <Loader2 className="animate-spin" size={34} />
            </div>
            <h2 className="mt-5 text-xl font-bold text-ink">Deploying your instance...</h2>
            <p className="mt-3 text-sm leading-6 text-slate-600">Your Wakel AI workspace is being created. This usually takes a few minutes.</p>
            <div className="mt-6 flex items-center gap-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-left text-sm font-semibold text-brand">
              <Loader2 className="animate-spin" size={18} />
              Creating environment...
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function CreatedField({ label, value, copied, onCopy }: { label: string; value: string; copied: boolean; onCopy: () => void }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-md border border-emerald-200 bg-white px-3 py-2">
      <div className="min-w-0">
        <p className="text-xs font-semibold uppercase text-slate-500">{label}</p>
        <p className="truncate font-mono text-sm font-bold text-slate-900">{value}</p>
      </div>
      <button
        type="button"
        onClick={onCopy}
        className="focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
        aria-label={`Copy ${label}`}
      >
        <Copy size={15} />
      </button>
      {copied && <span className="text-xs font-semibold text-emerald-700">Copied</span>}
    </div>
  );
}