"use client";

import { useEffect, useState } from "react";
import { Button, Card, Input, Label } from "@/components/ui";
import { Bot, Plus, Trash2, Loader2, Save, Pencil, X, BookOpen } from "lucide-react";
import { KnowledgeBank } from "@/components/dashboard/knowledge-bank";

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

const EMPTY: Partial<Role> = { name: "", name_ar: "", description: "", icon: "💼", base_prompt: "", is_active: true, sort_order: 0 };

export default function AdminAgentRolesContent() {
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState<Partial<Role> | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [knowledgeFor, setKnowledgeFor] = useState<Role | null>(null);

  async function load() {
    const res = await fetch("/api/admin/agent-roles");
    const b = await res.json().catch(() => ({}));
    setRoles(b.roles || []);
    setLoading(false);
  }
  useEffect(() => {
    load();
  }, []);

  async function save() {
    if (!editing) return;
    setSaving(true);
    setError("");
    const isNew = !editing.id;
    const res = await fetch(isNew ? "/api/admin/agent-roles" : `/api/admin/agent-roles/${editing.id}`, {
      method: isNew ? "POST" : "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: editing.name,
        name_ar: editing.name_ar || null,
        description: editing.description || null,
        icon: editing.icon || null,
        base_prompt: editing.base_prompt,
        sort_order: editing.sort_order ?? 0,
        is_active: editing.is_active ?? true,
      }),
    });
    setSaving(false);
    if (!res.ok) {
      const b = await res.json().catch(() => ({}));
      setError(b.error || "Save failed.");
      return;
    }
    setEditing(null);
    load();
  }

  async function remove(id: number) {
    if (!confirm("Delete this job? Instances using it will be detached.")) return;
    await fetch(`/api/admin/agent-roles/${id}`, { method: "DELETE" });
    load();
  }

  return (
    <div className="mx-auto max-w-3xl">
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-brand/10 text-brand">
            <Bot size={22} />
          </span>
          <div>
            <h1 className="text-2xl font-bold text-ink">Agent Jobs</h1>
            <p className="text-sm text-slate-500">Define the roles clients can pick. You write the base prompt; clients only add notes.</p>
          </div>
        </div>
        {!editing && (
          <Button onClick={() => setEditing({ ...EMPTY })}>
            <Plus size={16} /> New job
          </Button>
        )}
      </div>

      {editing && (
        <Card className="mb-6 grid gap-4">
          <div className="flex items-center justify-between">
            <h2 className="font-bold text-ink">{editing.id ? "Edit job" : "New job"}</h2>
            <button onClick={() => setEditing(null)} className="text-slate-400 hover:text-ink">
              <X size={18} />
            </button>
          </div>
          <div className="grid gap-4 sm:grid-cols-3">
            <div className="sm:col-span-1">
              <Label htmlFor="icon">Icon (emoji or image URL)</Label>
              <Input id="icon" value={editing.icon || ""} onChange={(e) => setEditing({ ...editing, icon: e.target.value })} placeholder="💼 or /roles/x.png" />
            </div>
            <div className="sm:col-span-1">
              <Label htmlFor="name">Name (EN)</Label>
              <Input id="name" value={editing.name || ""} onChange={(e) => setEditing({ ...editing, name: e.target.value })} placeholder="Accountant" />
            </div>
            <div className="sm:col-span-1">
              <Label htmlFor="name_ar">Name (AR)</Label>
              <Input id="name_ar" value={editing.name_ar || ""} onChange={(e) => setEditing({ ...editing, name_ar: e.target.value })} placeholder="محاسب" />
            </div>
          </div>
          <div>
            <Label htmlFor="description">Short description (shown to clients)</Label>
            <Input
              id="description"
              value={editing.description || ""}
              onChange={(e) => setEditing({ ...editing, description: e.target.value })}
              placeholder="Handles invoices, expenses and financial reports"
            />
          </div>
          <div>
            <Label htmlFor="base_prompt">Base prompt (hidden from clients)</Label>
            <textarea
              id="base_prompt"
              value={editing.base_prompt || ""}
              onChange={(e) => setEditing({ ...editing, base_prompt: e.target.value })}
              rows={8}
              className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-sm text-ink focus:border-brand focus:outline-none"
              placeholder="You are an experienced accountant. You reconcile invoices, track expenses, and produce weekly financial reports..."
            />
          </div>
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 text-sm text-slate-600">
              <input type="checkbox" checked={editing.is_active ?? true} onChange={(e) => setEditing({ ...editing, is_active: e.target.checked })} />
              Active
            </label>
            <div className="flex items-center gap-2">
              <Label htmlFor="sort">Order</Label>
              <Input
                id="sort"
                type="number"
                value={String(editing.sort_order ?? 0)}
                onChange={(e) => setEditing({ ...editing, sort_order: parseInt(e.target.value) || 0 })}
                className="w-20"
              />
            </div>
          </div>
          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
          <div>
            <Button onClick={save} disabled={saving || !editing.name || !editing.base_prompt}>
              {saving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
              {saving ? "Saving..." : "Save job"}
            </Button>
          </div>
        </Card>
      )}

      {loading ? (
        <div className="flex items-center gap-2 text-slate-500">
          <Loader2 size={18} className="animate-spin" /> Loading...
        </div>
      ) : (
        <div className="grid gap-3">
          {roles.length === 0 && <p className="text-sm text-slate-500">No jobs yet. Create the first one.</p>}
          {roles.map((r) => (
            <div key={r.id} className="flex items-start justify-between rounded-lg border border-slate-200 p-4">
              <div className="flex items-start gap-3">
                {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-10 w-10 shrink-0 rounded-md object-cover" />
                ) : (
                  <span className="text-2xl">{r.icon || "💼"}</span>
                )}
                <div>
                  <p className="font-semibold text-ink">
                    {r.name} {r.name_ar ? <span className="text-slate-400">· {r.name_ar}</span> : null}
                    {!r.is_active && <span className="ml-2 rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">inactive</span>}
                  </p>
                  {r.description && <p className="text-sm text-slate-500">{r.description}</p>}
                  <p className="mt-1 line-clamp-2 text-xs text-slate-400">{r.base_prompt}</p>
                </div>
              </div>
              <div className="flex shrink-0 gap-2">
                <button
                  onClick={() => setKnowledgeFor(knowledgeFor?.id === r.id ? null : r)}
                  className="text-slate-500 hover:text-brand"
                  title="بنك المعلومات الوظيفي"
                >
                  <BookOpen size={16} />
                </button>
                <button onClick={() => setEditing(r)} className="text-slate-500 hover:text-brand">
                  <Pencil size={16} />
                </button>
                <button onClick={() => remove(r.id)} className="text-slate-500 hover:text-red-600">
                  <Trash2 size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {knowledgeFor && (
        <Card className="mt-6">
          <div className="mb-3 flex items-center justify-between">
            <h2 className="font-bold text-ink">
              بنك المعلومات — {knowledgeFor.name_ar || knowledgeFor.name}
              <span className="mr-2 text-xs font-normal text-slate-500">(سياسات عامة تصل لكل عملاء هذه الوظيفة)</span>
            </h2>
            <button onClick={() => setKnowledgeFor(null)} className="text-slate-400 hover:text-ink">
              <X size={18} />
            </button>
          </div>
          <KnowledgeBank roleId={knowledgeFor.id} isAdmin />
        </Card>
      )}
    </div>
  );
}