"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import {
  Card,
  Button,
  Badge,
  Modal,
  Field,
  Input,
  Select,
  Toggle,
  SectionTitle,
  ErrorNote,
} from "@/app/adminx/ui";

interface Provider {
  id: number;
  name: string;
  slug: string;
  type: string;
  endpoint: string;
  model: string;
  status: string;
  isDefault: boolean;
  isBackup: boolean;
  sortOrder: number;
  keySet?: boolean;
}

const empty: Provider = {
  id: 0,
  name: "",
  slug: "",
  type: "openai",
  endpoint: "",
  model: "",
  status: "disabled",
  isDefault: false,
  isBackup: false,
  sortOrder: 0,
  keySet: false,
};

const TYPE_HINTS: Record<string, string> = {
  openai: "OpenAI-compatible (OpenAI, Groq, OpenRouter)",
  gemini: "Google Gemini API",
  anthropic: "Anthropic Claude API",
};

export function ProvidersSection() {
  const [items, setItems] = useState<Provider[]>([]);
  const [editing, setEditing] = useState<Provider | null>(null);
  const [apiKey, setApiKey] = useState("");
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    const data = await api.get("providers");
    setItems(data.providers);
  }, []);

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

  function openEdit(p: Provider | null) {
    setApiKey("");
    setEditing(p ? { ...p } : { ...empty, sortOrder: items.length + 1 });
  }

  async function save() {
    if (!editing) return;
    setError("");
    try {
      const payload = { ...editing, apiKey };
      if (editing.id) await api.put(`providers?id=${editing.id}`, payload);
      else await api.post("providers", payload);
      setEditing(null);
      await load();
    } catch (e: any) {
      setError(e.message);
    }
  }

  async function remove(p: Provider) {
    if (!confirm(`Delete provider "${p.name}"?`)) return;
    await api.del(`providers?id=${p.id}`);
    await load();
  }

  return (
    <div>
      <SectionTitle
        title="AI Providers"
        action={<Button onClick={() => openEdit(null)}>+ New Provider</Button>}
      />
      <ErrorNote message={error} />

      <p className="mb-4 rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
        API keys are stored server-side and never exposed in the browser. Add your own key from a
        provider that permits your intended usage. Free tiers and quotas can change at any time.
      </p>

      <Card className="overflow-hidden">
        <table className="w-full text-left text-sm">
          <thead className="border-b border-slate-100 bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
            <tr>
              <th className="px-4 py-3">Provider</th>
              <th className="px-4 py-3">Type</th>
              <th className="px-4 py-3">Model</th>
              <th className="px-4 py-3">API Key</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3">Roles</th>
              <th className="px-4 py-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            {items.map((p) => (
              <tr key={p.id} className="border-b border-slate-50 hover:bg-slate-50/50">
                <td className="px-4 py-3 font-medium text-slate-800">{p.name}</td>
                <td className="px-4 py-3 text-slate-500">{p.type}</td>
                <td className="px-4 py-3 text-slate-500">{p.model || "—"}</td>
                <td className="px-4 py-3 text-slate-500">{p.keySet ? "••••••••" : "—"}</td>
                <td className="px-4 py-3">
                  <Badge color={p.status === "enabled" ? "green" : "slate"}>{p.status}</Badge>
                </td>
                <td className="px-4 py-3">
                  <div className="flex gap-1">
                    {p.isDefault && <Badge color="indigo">default</Badge>}
                    {p.isBackup && <Badge color="amber">backup</Badge>}
                  </div>
                </td>
                <td className="px-4 py-3">
                  <div className="flex justify-end gap-1">
                    <Button variant="ghost" onClick={() => openEdit(p)}>Edit</Button>
                    <Button variant="ghost" onClick={() => remove(p)} className="text-red-600 hover:bg-red-50">Delete</Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <Modal open={!!editing} onClose={() => setEditing(null)} title={editing?.id ? "Edit Provider" : "New Provider"}>
        {editing && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <Field label="Name">
                <Input value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
              </Field>
              <Field label="Type">
                <Select value={editing.type} onChange={(e) => setEditing({ ...editing, type: e.target.value })}>
                  <option value="openai">OpenAI-compatible</option>
                  <option value="gemini">Gemini</option>
                  <option value="anthropic">Anthropic</option>
                </Select>
              </Field>
            </div>
            <p className="text-xs text-slate-400">{TYPE_HINTS[editing.type]}</p>
            <Field label="API endpoint" hint="Leave empty to use the default endpoint for this provider">
              <Input value={editing.endpoint} onChange={(e) => setEditing({ ...editing, endpoint: e.target.value })} />
            </Field>
            <Field label="Model">
              <Input value={editing.model} onChange={(e) => setEditing({ ...editing, model: e.target.value })} />
            </Field>
            <Field label={editing.keySet ? "API key (leave blank to keep current)" : "API key"}>
              <Input type="password" placeholder={editing.keySet ? "••••••••" : "sk-…"} value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
            </Field>
            {editing.keySet && (
              <button className="text-xs text-red-500 hover:underline" onClick={() => setApiKey("__CLEAR__")}>
                Clear existing key
              </button>
            )}
            <div className="flex flex-wrap gap-6">
              <Toggle checked={editing.status === "enabled"} onChange={(v) => setEditing({ ...editing, status: v ? "enabled" : "disabled" })} label="Enabled" />
              <Toggle checked={editing.isDefault} onChange={(v) => setEditing({ ...editing, isDefault: v })} label="Default provider" />
              <Toggle checked={editing.isBackup} onChange={(v) => setEditing({ ...editing, isBackup: v })} label="Backup provider" />
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setEditing(null)}>Cancel</Button>
              <Button onClick={save} disabled={!editing.name}>Save</Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}