'use client';
// ApiKeysTab — API Key 录入（只录不显余额，CLAUDE.md红线）
import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { ApiKey, CreateApiKeyRequest, PaginatedResponse, ApiError } from '@/types/index';
import { getErrorAction } from '@/types/errors';

export function ApiKeysTab() {
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [form, setForm] = useState<CreateApiKeyRequest>({ provider: 'openai', api_key: '' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [saving, setSaving] = useState(false);

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

  async function loadKeys() {
    setLoading(true);
    try {
      const data = await api.get<PaginatedResponse<ApiKey>>('/api/v1/api-keys');
      setKeys(data.items);
    } catch { /* silent */ } finally { setLoading(false); }
  }

  async function handleAdd(e: React.FormEvent) {
    e.preventDefault();
    if (!form.api_key.trim()) { setError('请填写 API Key'); return; }
    setSaving(true); setError('');
    try {
      await api.post('/api/v1/api-keys', form);
      setForm({ provider: 'openai', api_key: '' });
      await loadKeys();
    } catch (err) {
      const apiErr = err as ApiError;
      setError(apiErr?.message || getErrorAction(apiErr?.code).message);
    } finally { setSaving(false); }
  }

  async function handleDelete(id: number) {
    if (!confirm('确认删除此 Key？')) return;
    try {
      await api.delete(`/api/v1/api-keys/${id}`);
      setKeys((ks) => ks.filter((k) => k.id !== id));
    } catch { /* ignore */ }
  }

  return (
    <div className="space-y-6">
      <p className="text-sm text-text-secondary bg-brand-cream-dark px-4 py-3 rounded-lg">
        API Key 由各人自录，余额和用量请到中转站后台查看。
      </p>
      <form onSubmit={handleAdd} className="flex gap-3 items-end">
        <div>
          <label htmlFor="provider" className="block text-sm font-medium text-text-primary mb-1">Provider</label>
          <select id="provider" value={form.provider}
            onChange={(e) => setForm((f) => ({ ...f, provider: e.target.value }))}
            className="border border-border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-brand-orange">
            <option value="openai">OpenAI (gpt-image-2)</option>
            <option value="gemini">Gemini</option>
          </select>
        </div>
        <div className="flex-1">
          <label htmlFor="api-key-input" className="block text-sm font-medium text-text-primary mb-1">API Key</label>
          <input id="api-key-input" type="password" value={form.api_key}
            onChange={(e) => setForm((f) => ({ ...f, api_key: e.target.value }))}
            placeholder="sk-..."
            className="w-full border border-border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-brand-orange"
            aria-label="输入 API Key"
          />
        </div>
        <button type="submit" disabled={saving} aria-label="保存 API Key"
          className="bg-brand-orange text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-orange-600 disabled:opacity-50">
          {saving ? '保存中…' : '保存'}
        </button>
      </form>
      {error && <p role="alert" className="text-status-error text-sm">{error}</p>}
      {loading ? (
        <div className="text-text-secondary text-sm">加载中…</div>
      ) : (
        <ul className="divide-y divide-border-default" aria-label="已录入的 API Key 列表">
          {keys.map((k) => (
            <li key={k.id} className="flex items-center justify-between py-3 text-sm">
              <span>
                <span className="font-medium">{k.provider}</span>
                <span className="text-text-secondary ml-2">…{k.key_last4}</span>
              </span>
              <button onClick={() => handleDelete(k.id)} aria-label={`删除 ${k.provider} Key`}
                className="text-status-error text-xs hover:underline">删除</button>
            </li>
          ))}
          {keys.length === 0 && (
            <li className="py-3 text-text-tertiary text-sm">暂无 Key，请先录入</li>
          )}
        </ul>
      )}
    </div>
  );
}