import { useTranslation } from 'react-i18next';
import { asError } from '@/utils/errorTypes';
import React, { useState, useEffect } from 'react';
import { Tabs } from '@/components/shared/Tabs';
import {
  fetchProviders, createProvider, updateProvider, deleteProvider,
  fetchPresets, createPreset, updatePreset, deletePreset,
  fetchAgents, createAgent, updateAgent, deleteAgent,
  fetchTools,
  type AIProvider, type AIPreset, type AIAgent, type AITool,
} from '@/api/ai';

// ─── Provider Tab ───
function ProviderTab() {
  const { t } = useTranslation();
  const [providers, setProviders] = useState<AIProvider[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [editId, setEditId] = useState<string | null>(null);
  const [form, setForm] = useState({ name: '', provider_type: 'openai', api_key: '', base_url: '', is_default: false });

  const load = async () => {
    try { setProviders(await fetchProviders()); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); } finally { setLoading(false); }
  };
  useEffect(() => { load(); }, []);

  const handleSave = async () => {
    try {
      if (editId) { await updateProvider(editId, form); } else { await createProvider(form); }
      setShowForm(false); setEditId(null); setForm({ name: '', provider_type: 'openai', api_key: '', base_url: '', is_default: false });
      await load();
    } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  const handleEdit = (p: AIProvider) => {
    setEditId(p.id); setForm({ name: p.name, provider_type: p.provider_type, api_key: '', base_url: p.base_url, is_default: p.is_default });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm(t('aiSettings.confirmDeleteProvider'))) return;
    try { await deleteProvider(id); await load(); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  if (loading) return <div className="p-4">{t('common.loading')}</div>;

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-lg font-semibold">{t('aiSettings.providers.title')}</h2>
        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ name: '', provider_type: 'openai', api_key: '', base_url: '', is_default: false }); }} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700">{t('aiSettings.add')} </button>
      </div>
      {error && <div className="text-sm text-red-600">{typeof error === "string" ? error : (error as any)?.message || "t('common.errorOccurred')"}</div>}
      {showForm && (
        <div className="border border-secondary-200 rounded-lg p-4 space-y-3 bg-secondary-50">
          <div className="grid grid-cols-2 gap-3">
            <input placeholder={t('aiSettings.name')} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
            <select value={form.provider_type} onChange={(e) => setForm({ ...form, provider_type: e.target.value })} className="border rounded-lg px-3 py-2 text-sm">
              <option value="openai">OpenAI</option>
              <option value="anthropic">Anthropic</option>
              <option value="ollama">Ollama</option>
              <option value="azure">Azure OpenAI</option>
              <option value="huggingface">HuggingFace</option>
              <option value="custom">Custom</option>
            </select>
            <input placeholder={t('aiSettings.apiKey')} type="password" value={form.api_key} onChange={(e) => setForm({ ...form, api_key: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
            <input placeholder={t('aiSettings.baseUrlOptional')} value={form.base_url} onChange={(e) => setForm({ ...form, base_url: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
          </div>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" checked={form.is_default} onChange={(e) => setForm({ ...form, is_default: e.target.checked })} /> t('aiSettings.defaultProvider')
          </label>
          <div className="flex gap-2">
            <button onClick={handleSave} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg">{t('aiSettings.save')} </button>
            <button onClick={() => setShowForm(false)} className="px-3 py-1.5 text-sm border rounded-lg">{t('aiSettings.cancel')} </button>
          </div>
        </div>
      )}
      <div className="space-y-2">
        {providers.map((p) => (
          <div key={p.id} className="border border-secondary-200 rounded-lg p-3 flex items-center justify-between">
            <div>
              <div className="font-medium text-sm">{p.name} {p.is_default && <span className="text-xs text-primary-600">{t('aiSettings.defaultTag')}</span>}</div>
              <div className="text-xs text-secondary-500">{p.provider_type} · {p.api_key}</div>
            </div>
            <div className="flex gap-2">
              <button onClick={() => handleEdit(p)} className="text-sm text-primary-600 hover:underline">{t('aiSettings.edit')} </button>
              <button onClick={() => handleDelete(p.id)} className="text-sm text-red-600 hover:underline">{t('aiSettings.delete')} </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Presets Tab ───
function PresetTab() {
  const { t } = useTranslation();
  const [presets, setPresets] = useState<AIPreset[]>([]);
  const [providers, setProviders] = useState<AIProvider[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [editId, setEditId] = useState<string | null>(null);
  const [form, setForm] = useState({ name: '', model_id: '', provider_id: '', temperature: 0.7, max_tokens: 2048, top_p: 1.0, system_prompt: '' });

  const load = async () => {
    try { setPresets(await fetchPresets()); setProviders(await fetchProviders()); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); } finally { setLoading(false); }
  };
  useEffect(() => { load(); }, []);

  const handleSave = async () => {
    try {
      const data = { ...form, provider_id: form.provider_id || undefined };
      if (editId) { await updatePreset(editId, data); } else { await createPreset(data); }
      setShowForm(false); setEditId(null); setForm({ name: '', model_id: '', provider_id: '', temperature: 0.7, max_tokens: 2048, top_p: 1.0, system_prompt: '' });
      await load();
    } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  const handleEdit = (p: AIPreset) => {
    setEditId(p.id); setForm({ name: p.name, model_id: p.model_id, provider_id: p.provider_id || '', temperature: p.temperature, max_tokens: p.max_tokens, top_p: p.top_p, system_prompt: p.system_prompt });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Preset löschen?')) return;
    try { await deletePreset(id); await load(); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  if (loading) return <div className="p-4">{t('common.loading')}</div>;

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-lg font-semibold">Modelle & Presets</h2>
        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ name: '', model_id: '', provider_id: '', temperature: 0.7, max_tokens: 2048, top_p: 1.0, system_prompt: '' }); }} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg">{t('aiSettings.add')} </button>
      </div>
      {error && <div className="text-sm text-red-600">{typeof error === "string" ? error : (error as any)?.message || "t('common.errorOccurred')"}</div>}
      {showForm && (
        <div className="border border-secondary-200 rounded-lg p-4 space-y-3 bg-secondary-50">
          <div className="grid grid-cols-2 gap-3">
            <input placeholder="Preset Name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
            <input placeholder="Modell ID (z.B. gpt-4o-mini)" value={form.model_id} onChange={(e) => setForm({ ...form, model_id: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
            <select value={form.provider_id} onChange={(e) => setForm({ ...form, provider_id: e.target.value })} className="border rounded-lg px-3 py-2 text-sm">
              <option value="">Anbieter wählen...</option>
              {providers.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
            <input type="number" step="0.1" min="0" max="2" placeholder="Temperature" value={form.temperature} onChange={(e) => setForm({ ...form, temperature: parseFloat(e.target.value) })} className="border rounded-lg px-3 py-2 text-sm" />
            <input type="number" placeholder="Max Tokens" value={form.max_tokens} onChange={(e) => setForm({ ...form, max_tokens: parseInt(e.target.value) })} className="border rounded-lg px-3 py-2 text-sm" />
            <input type="number" step="0.1" min="0" max="1" placeholder="Top P" value={form.top_p} onChange={(e) => setForm({ ...form, top_p: parseFloat(e.target.value) })} className="border rounded-lg px-3 py-2 text-sm" />
          </div>
          <textarea placeholder="System Prompt (optional)" value={form.system_prompt} onChange={(e) => setForm({ ...form, system_prompt: e.target.value })} rows={3} className="w-full border rounded-lg px-3 py-2 text-sm" />
          <div className="flex gap-2">
            <button onClick={handleSave} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg">{t('aiSettings.save')} </button>
            <button onClick={() => setShowForm(false)} className="px-3 py-1.5 text-sm border rounded-lg">{t('aiSettings.cancel')} </button>
          </div>
        </div>
      )}
      <div className="space-y-2">
        {presets.map((p) => (
          <div key={p.id} className="border border-secondary-200 rounded-lg p-3 flex items-center justify-between">
            <div>
              <div className="font-medium text-sm">{p.name}</div>
              <div className="text-xs text-secondary-500">{p.model_id} · temp={p.temperature} · max_tokens={p.max_tokens}</div>
            </div>
            <div className="flex gap-2">
              <button onClick={() => handleEdit(p)} className="text-sm text-primary-600 hover:underline">{t('aiSettings.edit')} </button>
              <button onClick={() => handleDelete(p.id)} className="text-sm text-red-600 hover:underline">{t('aiSettings.delete')} </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Agents Tab ───
function AgentTab() {
  const { t } = useTranslation();
  const [agents, setAgents] = useState<AIAgent[]>([]);
  const [presets, setPresets] = useState<AIPreset[]>([]);
  const [tools, setTools] = useState<AITool[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [editId, setEditId] = useState<string | null>(null);
  const [form, setForm] = useState({ name: '', description: '', system_prompt: '', preset_id: '', tool_ids: [] as string[] });

  const load = async () => {
    try { setAgents(await fetchAgents()); setPresets(await fetchPresets()); setTools(await fetchTools()); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); } finally { setLoading(false); }
  };
  useEffect(() => { load(); }, []);

  const handleSave = async () => {
    try {
      const data = { ...form, preset_id: form.preset_id || undefined };
      if (editId) { await updateAgent(editId, data); } else { await createAgent(data); }
      setShowForm(false); setEditId(null); setForm({ name: '', description: '', system_prompt: '', preset_id: '', tool_ids: [] });
      await load();
    } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  const handleEdit = (a: AIAgent) => {
    setEditId(a.id); setForm({ name: a.name, description: a.description, system_prompt: a.system_prompt, preset_id: a.preset_id || '', tool_ids: a.tool_ids || [] });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Agent löschen?')) return;
    try { await deleteAgent(id); await load(); } catch (e: unknown) { const errObj = asError(e); setError(errObj?.message || null); }
  };

  const toggleTool = (toolName: string) => {
    setForm((prev) => ({
      ...prev,
      tool_ids: prev.tool_ids.includes(toolName)
        ? prev.tool_ids.filter((t) => t !== toolName)
        : [...prev.tool_ids, toolName],
    }));
  };

  if (loading) return <div className="p-4">{t('common.loading')}</div>;

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-lg font-semibold">Agenten</h2>
        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ name: '', description: '', system_prompt: '', preset_id: '', tool_ids: [] }); }} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg">{t('aiSettings.add')} </button>
      </div>
      {error && <div className="text-sm text-red-600">{typeof error === "string" ? error : (error as any)?.message || "t('common.errorOccurred')"}</div>}
      {showForm && (
        <div className="border border-secondary-200 rounded-lg p-4 space-y-3 bg-secondary-50">
          <div className="grid grid-cols-2 gap-3">
            <input placeholder={t('aiSettings.name')} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
            <input placeholder="Beschreibung" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} className="border rounded-lg px-3 py-2 text-sm" />
          </div>
          <select value={form.preset_id} onChange={(e) => setForm({ ...form, preset_id: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm">
            <option value="">Preset wählen...</option>
            {presets.map((p) => <option key={p.id} value={p.id}>{p.name} ({p.model_id})</option>)}
          </select>
          <textarea placeholder="System Prompt" value={form.system_prompt} onChange={(e) => setForm({ ...form, system_prompt: e.target.value })} rows={4} className="w-full border rounded-lg px-3 py-2 text-sm" />
          {tools.length > 0 && (
            <div>
              <div className="text-sm font-medium mb-2">Tools:</div>
              <div className="space-y-1 max-h-40 overflow-y-auto">
                {tools.map((tool) => (
                  <label key={tool.name} className="flex items-center gap-2 text-sm">
                    <input type="checkbox" checked={form.tool_ids.includes(tool.name)} onChange={() => toggleTool(tool.name)} />
                    <span>{tool.name} <span className="text-xs text-secondary-400">({tool.plugin_name})</span></span>
                  </label>
                ))}
              </div>
            </div>
          )}
          <div className="flex gap-2">
            <button onClick={handleSave} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg">{t('aiSettings.save')} </button>
            <button onClick={() => setShowForm(false)} className="px-3 py-1.5 text-sm border rounded-lg">{t('aiSettings.cancel')} </button>
          </div>
        </div>
      )}
      <div className="space-y-2">
        {agents.map((a) => (
          <div key={a.id} className="border border-secondary-200 rounded-lg p-3 flex items-center justify-between">
            <div>
              <div className="font-medium text-sm">{a.name} {a.is_default && <span className="text-xs text-primary-600">{t('aiSettings.defaultTag')}</span>}</div>
              <div className="text-xs text-secondary-500">{a.description || 'Keine Beschreibung'}</div>
              {a.tool_ids.length > 0 && <div className="text-xs text-secondary-400 mt-1">Tools: {a.tool_ids.join(', ')}</div>}
            </div>
            <div className="flex gap-2">
              <button onClick={() => handleEdit(a)} className="text-sm text-primary-600 hover:underline">{t('aiSettings.edit')} </button>
              {!a.is_default && <button onClick={() => handleDelete(a.id)} className="text-sm text-red-600 hover:underline">{t('aiSettings.delete')} </button>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Tools Tab ───
function ToolsTab() {
  const { t } = useTranslation();
  const [tools, setTools] = useState<AITool[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchTools().then(setTools).catch((e) => setError(e?.message)).finally(() => setLoading(false));
  }, []);

  if (loading) return <div className="p-4">{t('common.loading')}</div>;

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">Verfügbare Tools</h2>
      <p className="text-sm text-secondary-500">Diese Tools werden von Plugins bereitgestellt und können Agenten zugewiesen werden.</p>
      {error && <div className="text-sm text-red-600">{typeof error === "string" ? error : (error as any)?.message || "t('common.errorOccurred')"}</div>}
      {tools.length === 0 ? (
        <div className="text-sm text-secondary-400 py-8 text-center">Keine Tools verfügbar. Plugins können Tools registrieren.</div>
      ) : (
        <div className="space-y-2">
          {tools.map((tool) => (
            <div key={tool.name} className="border border-secondary-200 rounded-lg p-3">
              <div className="flex items-center justify-between">
                <div className="font-medium text-sm">{tool.name}</div>
                <div className="flex gap-2 text-xs">
                  {tool.required_permission && <span className="px-2 py-0.5 rounded bg-amber-100 text-amber-700">{tool.required_permission}</span>}
                  <span className="px-2 py-0.5 rounded bg-secondary-100 text-secondary-600">{tool.plugin_name}</span>
                  <span className="px-2 py-0.5 rounded bg-secondary-100 text-secondary-600">{tool.category}</span>
                </div>
              </div>
              <div className="text-xs text-secondary-500 mt-1">{tool.description}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Main Settings Page ───
export function AISettingsPage() {
  const tabs = [
    { key: 'providers', label: 'Anbieter', content: <ProviderTab /> },
    { key: 'presets', label: 'Modelle & Presets', content: <PresetTab /> },
    { key: 'agents', label: 'Agenten', content: <AgentTab /> },
    { key: 'tools', label: 'Tools', content: <ToolsTab /> },
  ];

  return (
    <div className="max-w-4xl">
      <h1 className="text-2xl font-bold text-secondary-900 mb-6">KI Assistent Einstellungen</h1>
      <Tabs tabs={tabs} />
    </div>
  );
}