'use client';

import { useCallback, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';
import BackToDashboard from '@/components/BackToDashboard';
import { PageLoader } from '@/components/DotLoader';

interface Provider {
  id: number;
  name: string;
  provider: string;
  provider_label: string;
  base_url: string;
  model: string;
  max_tokens: number;
  temperature: number;
  is_active: boolean;
  is_default: boolean;
  api_key_masked: string;
  has_key: boolean;
}

const PROVIDER_TYPES = [
  { value: 'GEMINI', label: 'Google Gemini', model: 'gemini-2.0-flash' },
  { value: 'OPENROUTER', label: 'OpenRouter', model: 'openai/gpt-4o-mini' },
  { value: 'OPENAI', label: 'OpenAI-compatible', model: 'gpt-4o-mini' },
  { value: 'CUSTOM', label: 'Custom', model: '' },
];

const EMPTY = {
  name: '', provider: 'GEMINI', base_url: '', model: 'gemini-2.0-flash',
  max_tokens: 800, temperature: 0.7, is_active: true, is_default: false, api_key: '',
};

export default function LLMProvidersPage() {
  const router = useRouter();
  const { user: me } = useAuth();
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<Provider[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState<any>(EMPTY);
  const [saving, setSaving] = useState(false);
  const [testingId, setTestingId] = useState<number | null>(null);

  const load = useCallback(async () => {
    const res = (await api.get('/llm/providers/')) as any;
    setRows(res?.data ?? []);
  }, []);

  useEffect(() => {
    if (!me) return;
    (async () => {
      try {
        if (me.role !== 'ADMIN') { router.push('/dashboard'); return; }
        await load();
      } finally { setLoading(false); }
    })();
  }, [me, router, load]);

  const openCreate = () => { setEditId(null); setForm(EMPTY); setShowModal(true); };
  const openEdit = (p: Provider) => {
    setEditId(p.id);
    setForm({ ...p, api_key: '' }); // key blank; only replace if typed
    setShowModal(true);
  };

  const save = async () => {
    if (!form.name.trim() || !form.model.trim()) { toast.warning('Name and Model are required.'); return; }
    if (!editId && !form.api_key.trim() && form.provider !== 'CUSTOM') { toast.warning('API key is required.'); return; }
    setSaving(true);
    try {
      const payload: any = { ...form };
      if (!payload.api_key) delete payload.api_key; // don't overwrite key with blank on edit
      if (editId) await api.put(`/llm/providers/${editId}/`, payload);
      else await api.post('/llm/providers/', payload);
      toast.success(editId ? 'Provider updated' : 'Provider added');
      setShowModal(false);
      load();
    } catch (e: any) {
      toast.error(e?.message || 'Save failed');
    } finally { setSaving(false); }
  };

  const remove = async (p: Provider) => {
    const r = await showConfirmDelete(`Delete provider "${p.name}"?`);
    if (!r.isConfirmed) return;
    await api.delete(`/llm/providers/${p.id}/`);
    toast.success('Provider deleted');
    load();
  };

  const test = async (p: Provider) => {
    setTestingId(p.id);
    try {
      const res = (await api.post(`/llm/providers/${p.id}/test/`, {})) as any;
      toast.success(`${p.name}: ${res?.data?.reply || 'OK'}`);
    } catch (e: any) {
      toast.error(e?.message || 'Test failed');
    } finally { setTestingId(null); }
  };

  if (loading) return <PageLoader />;

  const inputCls = 'w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3 py-2 text-xs focus:outline-none focus:border-[#405189] text-slate-800 dark:text-white';

  return (
    <>
        <main className="flex-1 p-6 overflow-x-auto">
          <BackToDashboard />
          <div className="flex items-center justify-between mb-4">
            <p className="text-xs text-slate-500 dark:text-slate-400">Configure LLM providers (Gemini, OpenRouter, OpenAI-compatible). The <b>default</b> active provider is used across the app.</p>
            <button onClick={openCreate} className="bg-[#405189] hover:bg-[#364574] text-white px-4 py-2 text-xs font-bold cursor-pointer">
              <i className="fa-solid fa-plus mr-1.5"></i>Add Provider
            </button>
          </div>

          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm overflow-x-auto">
            <table className="w-full text-xs">
              <thead className="bg-slate-50 dark:bg-slate-950/40 text-slate-400 text-left text-[10px] uppercase">
                <tr>
                  {['Name', 'Provider', 'Model', 'API Key', 'Default', 'Active', 'Actions'].map((h) => (
                    <th key={h} className="px-4 py-2.5 font-semibold">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.length === 0 ? (
                  <tr><td colSpan={7} className="px-4 py-10 text-center text-slate-400">No providers yet. Click “Add Provider”.</td></tr>
                ) : rows.map((p) => (
                  <tr key={p.id} className="border-t border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/40">
                    <td className="px-4 py-2.5 font-bold text-slate-700 dark:text-slate-200">{p.name}</td>
                    <td className="px-4 py-2.5 text-slate-500 dark:text-slate-400">{p.provider_label}</td>
                    <td className="px-4 py-2.5 font-mono text-slate-500 dark:text-slate-400">{p.model}</td>
                    <td className="px-4 py-2.5 font-mono text-slate-400">{p.has_key ? p.api_key_masked : <span className="text-rose-400">no key</span>}</td>
                    <td className="px-4 py-2.5">{p.is_default ? <span className="text-[10px] font-bold px-2 py-0.5 bg-[#405189]/10 text-[#405189]">DEFAULT</span> : '—'}</td>
                    <td className="px-4 py-2.5">
                      <span className={`text-[10px] font-bold px-2 py-0.5 ${p.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-400'}`}>{p.is_active ? 'Active' : 'Off'}</span>
                    </td>
                    <td className="px-4 py-2.5">
                      <div className="flex items-center gap-1.5">
                        <button onClick={() => test(p)} disabled={testingId === p.id} title="Test connection"
                          className="px-2.5 py-1 text-[11px] font-bold border border-[#0ab39c]/30 bg-[#0ab39c]/10 text-[#0ab39c] hover:bg-[#0ab39c] hover:text-white transition cursor-pointer">
                          {testingId === p.id ? <i className="fa-solid fa-spinner fa-spin"></i> : <><i className="fa-solid fa-plug mr-1"></i>Test</>}
                        </button>
                        <button onClick={() => openEdit(p)} title="Edit"
                          className="w-7 h-7 flex items-center justify-center border border-[#405189]/30 bg-[#405189]/10 text-[#405189] hover:bg-[#405189] hover:text-white transition cursor-pointer"><i className="fa-solid fa-pen text-[11px]"></i></button>
                        <button onClick={() => remove(p)} title="Delete"
                          className="w-7 h-7 flex items-center justify-center border border-rose-300/40 bg-rose-50 text-rose-500 hover:bg-rose-500 hover:text-white transition cursor-pointer"><i className="fa-solid fa-trash text-[11px]"></i></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </main>

      {/* Add/Edit modal */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" onClick={() => !saving && setShowModal(false)} />
          <div className="relative z-10 w-full max-w-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-2xl p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-slate-900 dark:text-white">{editId ? 'Edit Provider' : 'Add Provider'}</h3>
              <button onClick={() => !saving && setShowModal(false)} className="w-8 h-8 flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer"><i className="fa-solid fa-xmark"></i></button>
            </div>
            <div className="space-y-3">
              <div>
                <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Name</label>
                <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Gemini Flash (Dev)" className={inputCls} />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Provider</label>
                  <select value={form.provider}
                    onChange={(e) => { const t = PROVIDER_TYPES.find((x) => x.value === e.target.value); setForm({ ...form, provider: e.target.value, model: form.model || t?.model || '' }); }}
                    className={`${inputCls} cursor-pointer`}>
                    {PROVIDER_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Model</label>
                  <input value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} placeholder="model id" className={inputCls} />
                </div>
              </div>
              <div>
                <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">API Key {editId && <span className="normal-case font-semibold text-slate-400">— leave blank to keep current</span>}</label>
                <input type="password" value={form.api_key} onChange={(e) => setForm({ ...form, api_key: e.target.value })} placeholder={editId ? '••••••••' : 'Paste API key'} className={inputCls} />
              </div>
              <div>
                <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Base URL <span className="normal-case font-semibold text-slate-400">— optional, blank = provider default</span></label>
                <input value={form.base_url} onChange={(e) => setForm({ ...form, base_url: e.target.value })} placeholder="https://…" className={inputCls} />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Max Tokens</label>
                  <input type="number" value={form.max_tokens} onChange={(e) => setForm({ ...form, max_tokens: Number(e.target.value) })} className={inputCls} />
                </div>
                <div>
                  <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Temperature</label>
                  <input type="number" step="0.1" min="0" max="2" value={form.temperature} onChange={(e) => setForm({ ...form, temperature: Number(e.target.value) })} className={inputCls} />
                </div>
              </div>
              <div className="flex items-center gap-5 pt-1">
                <label className="flex items-center gap-2 text-xs font-semibold text-slate-600 dark:text-slate-300 cursor-pointer">
                  <input type="checkbox" checked={form.is_default} onChange={(e) => setForm({ ...form, is_default: e.target.checked })} className="accent-[#405189]" /> Set as default
                </label>
                <label className="flex items-center gap-2 text-xs font-semibold text-slate-600 dark:text-slate-300 cursor-pointer">
                  <input type="checkbox" checked={form.is_active} onChange={(e) => setForm({ ...form, is_active: e.target.checked })} className="accent-[#405189]" /> Active
                </label>
              </div>
              <div className="flex justify-end gap-3 pt-2">
                <button onClick={() => setShowModal(false)} className="border border-slate-200 dark:border-slate-800 px-5 py-2 text-xs font-semibold cursor-pointer">Cancel</button>
                <button onClick={save} disabled={saving} className="bg-[#405189] hover:bg-[#364574] disabled:opacity-50 text-white px-6 py-2 text-xs font-extrabold cursor-pointer">
                  {saving ? 'Saving…' : editId ? 'Save Changes' : 'Add Provider'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}