'use client';

import { useEffect, useState } from 'react';
import { Sparkles, Plus, CheckCircle2, AlertTriangle, Loader2, Trash2, Pencil, X } from 'lucide-react';
import { useAuthStore } from '@/stores/useAuthStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { api } from '@/lib/api';
import type {
  AiConfigPublic,
  AiProviderPublic,
  AiProviderUpsertInput,
  AiProviderFormat,
} from '@ftb/shared';

const FORMAT_LABEL: Record<AiProviderFormat, string> = {
  anthropic: 'Anthropic 兼容',
  openai: 'OpenAI 兼容',
};

const FORMAT_HINT: Record<AiProviderFormat, string> = {
  anthropic: 'Anthropic 官方 + 兼容 Anthropic 格式的中转站',
  openai: 'OpenAI 官方 + 兼容 OpenAI Chat Completions 格式的中转站',
};

const PRESETS: Array<{ key: string; label: string; data: Partial<AiProviderUpsertInput> & { format: AiProviderFormat; model: string } }> = [
  {
    key: 'anthropic-official',
    label: 'Anthropic 官方',
    data: { id: 'anthropic-official', name: 'Anthropic 官方', format: 'anthropic', baseURL: 'https://api.anthropic.com', model: 'claude-sonnet-4-6' },
  },
  {
    key: 'openai-official',
    label: 'OpenAI 官方',
    data: { id: 'openai-official', name: 'OpenAI 官方', format: 'openai', baseURL: 'https://api.openai.com/v1', model: 'gpt-4o' },
  },
  {
    key: 'custom-anthropic',
    label: '+ 自定义（Anthropic 兼容）',
    data: { id: '', name: '', format: 'anthropic', baseURL: '', model: 'claude-sonnet-4-6' },
  },
  {
    key: 'custom-openai',
    label: '+ 自定义（OpenAI 兼容）',
    data: { id: '', name: '', format: 'openai', baseURL: '', model: 'gpt-4o' },
  },
];

export default function AiConfigPage() {
  return (
    <SuperAdminGuard>
      <AiConfigContent />
    </SuperAdminGuard>
  );
}

function SuperAdminGuard({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  const role = useMemberStore((s) => s.roles.find((r) => r.id === user?.roleId));
  const isSuperAdmin = !!role && role.permissions.includes('*');
  if (!isSuperAdmin) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-[14px] text-[var(--ink-soft)]">仅超级管理员可访问 AI 配置</p>
      </div>
    );
  }
  return <>{children}</>;
}

function AiConfigContent() {
  const user = useAuthStore((s) => s.user);
  const [config, setConfig] = useState<AiConfigPublic | null>(null);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [editingProvider, setEditingProvider] = useState<AiProviderPublic | null>(null);
  const [testing, setTesting] = useState<string | null>(null);
  const [testResults, setTestResults] = useState<Record<string, { ok: boolean; message: string }>>({});
  const [actionMessage, setActionMessage] = useState<string | null>(null);

  const fetchConfig = async () => {
    setLoading(true);
    try {
      const c = await api.get<AiConfigPublic>('/config/ai');
      setConfig(c);
    } catch (e: any) {
      setActionMessage(`读取配置失败：${e.message}`);
    } finally {
      setLoading(false);
    }
  };

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

  const handleActivate = async (id: string) => {
    try {
      const next = await api.post<AiConfigPublic>('/config/ai/activate', { id, operator: user?.name });
      setConfig(next);
      setActionMessage(`已激活：${next.providers.find((p) => p.id === id)?.name}`);
    } catch (e: any) {
      setActionMessage(`激活失败：${e.message}`);
    }
  };

  const handleDelete = async (id: string, name: string) => {
    if (!confirm(`确认删除提供商 "${name}"？`)) return;
    try {
      const next = await api.delete<AiConfigPublic>(`/config/ai/providers/${id}?operator=${encodeURIComponent(user?.name || '')}`);
      setConfig(next);
      setActionMessage(`已删除：${name}`);
    } catch (e: any) {
      setActionMessage(`删除失败：${e.message}`);
    }
  };

  const handleTest = async (id: string) => {
    setTesting(id);
    setTestResults((prev) => ({ ...prev, [id]: undefined as any }));
    try {
      const r = await api.post<{ ok: boolean; message?: string; error?: string }>('/config/ai/test', { id });
      setTestResults((prev) => ({
        ...prev,
        [id]: { ok: r.ok, message: r.ok ? r.message || '连接成功' : r.error || '连接失败' },
      }));
    } catch (e: any) {
      setTestResults((prev) => ({ ...prev, [id]: { ok: false, message: e.message } }));
    } finally {
      setTesting(null);
    }
  };

  const activeProvider = config?.providers.find((p) => p.isActive);

  return (
    <div className="flex h-full flex-col bg-[var(--bg)]">
      <header className="flex h-14 shrink-0 items-center gap-2 border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <Sparkles className="h-4 w-4 text-purple-600" />
        <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">AI 配置</h1>
      </header>

      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-3xl mx-auto space-y-4">
          {loading ? (
            <div className="text-[13px] text-[var(--ink-muted)]">加载中…</div>
          ) : (
            <>
              {/* 当前激活 */}
              <section className="rounded-2xl border border-purple-200 bg-purple-50/50 p-5">
                <h2 className="text-[12px] font-semibold text-purple-700 uppercase tracking-wide mb-2">当前激活</h2>
                {activeProvider ? (
                  <div>
                    <div className="text-[15px] font-semibold text-[var(--ink)]">{activeProvider.name}</div>
                    <div className="mt-1 text-[12px] text-[var(--ink-soft)]">
                      {FORMAT_LABEL[activeProvider.format]} · {activeProvider.baseURL}
                    </div>
                    <div className="mt-1 text-[12px] text-[var(--ink-soft)] font-mono">
                      {activeProvider.keyMask} · {activeProvider.model}
                    </div>
                  </div>
                ) : (
                  <div className="text-[13px] text-amber-700">尚未配置任何提供商，AI 拆解功能不可用</div>
                )}
              </section>

              {/* 操作消息 */}
              {actionMessage && (
                <div className="rounded-lg bg-blue-50 border border-blue-200 px-3 py-2 text-[12px] text-blue-700 flex items-center justify-between">
                  <span>{actionMessage}</span>
                  <button onClick={() => setActionMessage(null)} className="text-blue-500 hover:text-blue-700">
                    <X className="h-3.5 w-3.5" />
                  </button>
                </div>
              )}

              {/* 提供商列表 */}
              <section className="rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5">
                <div className="flex items-center justify-between mb-3">
                  <h2 className="text-[14px] font-semibold text-[var(--ink)]">已配置的提供商</h2>
                  <button
                    onClick={() => { setEditingProvider(null); setShowModal(true); }}
                    className="flex items-center gap-1 h-8 px-3 rounded-lg text-[12px] font-medium bg-purple-600 text-white hover:bg-purple-700"
                  >
                    <Plus className="h-3.5 w-3.5" />新增
                  </button>
                </div>

                {config?.providers.length === 0 ? (
                  <div className="rounded-lg border border-dashed border-[var(--line)] py-12 text-center">
                    <p className="text-[13px] text-[var(--ink-muted)]">还没有任何提供商，点上方"新增"添加</p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {config?.providers.map((p) => (
                      <ProviderRow
                        key={p.id}
                        provider={p}
                        testing={testing === p.id}
                        testResult={testResults[p.id]}
                        onActivate={() => handleActivate(p.id)}
                        onEdit={() => { setEditingProvider(p); setShowModal(true); }}
                        onDelete={() => handleDelete(p.id, p.name)}
                        onTest={() => handleTest(p.id)}
                      />
                    ))}
                  </div>
                )}
              </section>
            </>
          )}
        </div>
      </div>

      {showModal && (
        <ProviderModal
          provider={editingProvider}
          onClose={() => setShowModal(false)}
          onSaved={(next) => {
            setConfig(next);
            setShowModal(false);
            setActionMessage('保存成功');
          }}
          operator={user?.name}
        />
      )}
    </div>
  );
}

function ProviderRow({
  provider,
  testing,
  testResult,
  onActivate,
  onEdit,
  onDelete,
  onTest,
}: {
  provider: AiProviderPublic;
  testing: boolean;
  testResult?: { ok: boolean; message: string };
  onActivate: () => void;
  onEdit: () => void;
  onDelete: () => void;
  onTest: () => void;
}) {
  return (
    <div className={`rounded-lg border p-3 ${provider.isActive ? 'border-purple-300 bg-purple-50/30' : 'border-[var(--line)]'}`}>
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[14px] font-semibold text-[var(--ink)]">{provider.name}</span>
            {provider.isActive && (
              <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-600 text-white font-medium">已激活</span>
            )}
            <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-subtle)] text-[var(--ink-soft)]">
              {FORMAT_LABEL[provider.format]}
            </span>
          </div>
          <div className="mt-1 text-[11px] text-[var(--ink-soft)] truncate">{provider.baseURL}</div>
          <div className="mt-0.5 text-[11px] text-[var(--ink-soft)] font-mono">
            {provider.keyMask} · {provider.model}
          </div>
          {provider.remark && <div className="mt-1 text-[11px] text-[var(--ink-muted)]">{provider.remark}</div>}
          {testResult && (
            <div className={`mt-2 inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded border ${
              testResult.ok
                ? 'bg-emerald-50 border-emerald-200 text-emerald-700'
                : 'bg-rose-50 border-rose-200 text-rose-700'
            }`}>
              {testResult.ok ? <CheckCircle2 className="h-3 w-3" /> : <AlertTriangle className="h-3 w-3" />}
              {testResult.message}
            </div>
          )}
        </div>
        <div className="flex flex-col gap-1.5 shrink-0">
          {!provider.isActive && (
            <button
              onClick={onActivate}
              className="h-7 px-3 rounded text-[11px] font-medium bg-purple-600 text-white hover:bg-purple-700"
            >
              激活
            </button>
          )}
          <button
            onClick={onTest}
            disabled={testing}
            className="h-7 px-3 rounded text-[11px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] inline-flex items-center justify-center gap-1 disabled:opacity-50"
          >
            {testing ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
            测试
          </button>
          <button
            onClick={onEdit}
            className="h-7 px-3 rounded text-[11px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] inline-flex items-center justify-center gap-1"
          >
            <Pencil className="h-3 w-3" />编辑
          </button>
          <button
            onClick={onDelete}
            className="h-7 px-3 rounded text-[11px] font-medium border border-rose-200 text-rose-600 hover:bg-rose-50 inline-flex items-center justify-center gap-1"
          >
            <Trash2 className="h-3 w-3" />删除
          </button>
        </div>
      </div>
    </div>
  );
}

function ProviderModal({
  provider,
  onClose,
  onSaved,
  operator,
}: {
  provider: AiProviderPublic | null;
  onClose: () => void;
  onSaved: (next: AiConfigPublic) => void;
  operator?: string;
}) {
  const isEdit = !!provider;
  const [id, setId] = useState(provider?.id || '');
  const [name, setName] = useState(provider?.name || '');
  const [format, setFormat] = useState<AiProviderFormat>(provider?.format || 'anthropic');
  const [baseURL, setBaseURL] = useState(provider?.baseURL || '');
  const [apiKey, setApiKey] = useState('');
  const [model, setModel] = useState(provider?.model || 'claude-sonnet-4-6');
  const [remark, setRemark] = useState(provider?.remark || '');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const applyPreset = (presetKey: string) => {
    const p = PRESETS.find((x) => x.key === presetKey);
    if (!p) return;
    setId(p.data.id || '');
    setName(p.data.name || '');
    setFormat(p.data.format);
    setBaseURL(p.data.baseURL || '');
    setModel(p.data.model);
  };

  const canSubmit = id.trim() && name.trim() && baseURL.trim() && model.trim() && (isEdit || apiKey.trim());

  const handleSave = async () => {
    if (!canSubmit) return;
    setSaving(true);
    setError(null);
    try {
      const payload: AiProviderUpsertInput & { operator?: string } = {
        id: id.trim(),
        name: name.trim(),
        format,
        baseURL: baseURL.trim(),
        model: model.trim(),
        remark: remark.trim() || undefined,
        operator,
      };
      if (apiKey.trim()) payload.apiKey = apiKey.trim();
      const next = await api.patch<AiConfigPublic>('/config/ai/providers', payload);
      onSaved(next);
    } catch (e: any) {
      setError(e?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
      <div className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-5 shadow-2xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-[14px] font-semibold text-[var(--ink)]">{isEdit ? '编辑提供商' : '新增提供商'}</h3>
          <button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
        </div>

        {!isEdit && (
          <div className="mb-4">
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1.5">快速选择预设</label>
            <div className="flex flex-wrap gap-1.5">
              {PRESETS.map((p) => (
                <button
                  key={p.key}
                  onClick={() => applyPreset(p.key)}
                  className="h-7 px-2.5 rounded-md border border-[var(--line)] text-[11px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]"
                >
                  {p.label}
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">ID *</label>
              <input
                value={id}
                onChange={(e) => setId(e.target.value)}
                disabled={isEdit}
                placeholder="ikuncode"
                className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none disabled:opacity-60"
              />
            </div>
            <div>
              <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">显示名 *</label>
              <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="ikuncode"
                className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none"
              />
            </div>
          </div>

          <div>
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">API 格式 *</label>
            <div className="grid grid-cols-2 gap-2">
              {(['anthropic', 'openai'] as AiProviderFormat[]).map((f) => (
                <label
                  key={f}
                  className={`p-3 rounded-lg border cursor-pointer ${
                    format === f ? 'border-purple-400 bg-purple-50' : 'border-[var(--line)] hover:bg-[var(--bg-subtle)]'
                  }`}
                >
                  <input type="radio" name="format" checked={format === f} onChange={() => setFormat(f)} className="mr-2" />
                  <span className="text-[13px] font-medium text-[var(--ink)]">{FORMAT_LABEL[f]}</span>
                  <p className="mt-0.5 text-[10px] text-[var(--ink-muted)]">{FORMAT_HINT[f]}</p>
                </label>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">Base URL *</label>
            <input
              value={baseURL}
              onChange={(e) => setBaseURL(e.target.value)}
              placeholder="https://api.ikuncode.com"
              className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-mono focus:border-[var(--accent)] focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">
              API Key {isEdit ? '（留空则保留原 Key）' : '*'}
            </label>
            <input
              type="password"
              autoComplete="off"
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder={isEdit ? provider!.keyMask : 'sk-...'}
              className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-mono focus:border-[var(--accent)] focus:outline-none"
            />
            <p className="mt-1 text-[10px] text-[var(--ink-muted)]">出于安全考虑，Key 输入后无法再被读出，仅可重新填写覆盖</p>
          </div>

          <div>
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">模型 *</label>
            <input
              value={model}
              onChange={(e) => setModel(e.target.value)}
              placeholder={format === 'anthropic' ? 'claude-sonnet-4-6' : 'gpt-4o'}
              className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-mono focus:border-[var(--accent)] focus:outline-none"
            />
            <p className="mt-1 text-[10px] text-[var(--ink-muted)]">
              中转站不会替你选模型 — 必须填写一个该 baseURL 支持的模型 ID（如 claude-sonnet-4-6、claude-opus-4-7、gpt-4o、deepseek-v3 等）。请查阅中转站文档。
            </p>
          </div>

          <div>
            <label className="block text-[11px] font-medium text-[var(--ink-soft)] mb-1">备注</label>
            <input
              value={remark}
              onChange={(e) => setRemark(e.target.value)}
              placeholder="公司账号 / 个人测试 / ..."
              className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none"
            />
          </div>

          {error && (
            <div className="rounded-lg bg-rose-50 border border-rose-200 px-3 py-2 text-[12px] text-rose-700">
              {error}
            </div>
          )}
        </div>

        <div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
          <button onClick={onClose} className="h-9 px-3 rounded-lg text-[13px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">
            取消
          </button>
          <button
            onClick={handleSave}
            disabled={!canSubmit || saving}
            className="h-9 px-4 rounded-lg text-[13px] font-medium bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50"
          >
            {saving ? '保存中…' : '保存'}
          </button>
        </div>
      </div>
    </div>
  );
}