import React, { useEffect, useState } from 'react';
import {
  Key,
  Plus,
  Trash2,
  Pencil,
  Copy,
  Check,
  Webhook,
  Zap,
  Terminal,
  Bot,
} from 'lucide-react';
import { APIKey, ApiKeyScope, PriorityLevel, SharedList, TaskList } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
import { ToggleSwitch } from '../../components/ToggleSwitch';

interface ApiKeysPanelProps {
  onIngested?: () => void;
}

// What a key may do. The rights hold for every access alike: curl/REST and MCP for AI agents. The ids of
// the delivering rights (webhook:…) stay from the time keys could only deliver data.
type ScopeGroup = 'tasks' | 'lists' | 'inbox';
const SCOPES: { id: ApiKeyScope; label: string; chip: string; hint: string; group: ScopeGroup }[] = [
  { id: 'tasks:read', label: 'Lesen', chip: 'Aufgaben lesen', hint: 'Aufgabenlisten und Aufgaben lesen, suchen', group: 'tasks' },
  { id: 'webhook:task', label: 'Anlegen', chip: 'Aufgaben anlegen', hint: 'Nur neue Aufgaben anlegen', group: 'tasks' },
  { id: 'tasks:write', label: 'Ändern', chip: 'Aufgaben ändern', hint: 'Anlegen, ändern, abhaken und löschen', group: 'tasks' },
  { id: 'lists:read', label: 'Lesen', chip: 'Listen lesen', hint: 'Listen und ihre Einträge lesen', group: 'lists' },
  { id: 'webhook:list', label: 'Einträge hinzufügen', chip: 'Listeneinträge hinzufügen', hint: 'Nur neue Einträge hinzufügen', group: 'lists' },
  { id: 'lists:write', label: 'Ändern', chip: 'Listen ändern', hint: 'Einträge hinzufügen, ändern und abhaken', group: 'lists' },
  { id: 'webhook:triage', label: 'Inbox füllen', chip: 'Inbox', hint: 'Gedanken in die Inbox einliefern', group: 'inbox' },
];
const SCOPE_GROUPS: [ScopeGroup, string][] = [
  ['tasks', '📋 Aufgaben'],
  ['lists', '🛒 Listen'],
  ['inbox', '📥 Inbox'],
];
const scopeChip = (id: string) => SCOPES.find((s) => s.id === id)?.chip || id;

type SimTarget = 'triage' | 'task' | 'list_item';
type McpClient = 'claude' | 'codex' | 'json';
type Access = 'rest' | 'mcp';

// Personal API keys with rights (switches) and how to connect: curl / smart home (read examples,
// delivery simulator) or AI agents over MCP (settings → API)
export const ApiKeysPanel: React.FC<ApiKeysPanelProps> = ({ onIngested }) => {
  const [keys, setKeys] = useState<APIKey[]>([]);
  const [newKeyName, setNewKeyName] = useState('');
  const [newKeyScopes, setNewKeyScopes] = useState<ApiKeyScope[]>(['webhook:triage']);
  const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
  const [copiedKey, setCopiedKey] = useState(false);
  const [mcpClient, setMcpClient] = useState<McpClient>('claude');
  const [access, setAccess] = useState<Access>('rest');

  // Live Webhook Simulator State
  const [simTitle, setSimTitle] = useState('Waschmaschine im Keller ist fertig!');
  const [simPriority, setSimPriority] = useState<PriorityLevel>('high');
  const [simTarget, setSimTarget] = useState<SimTarget>('triage');
  const [simListId, setSimListId] = useState('');
  const [simTaskListId, setSimTaskListId] = useState('');
  const [simStatus, setSimStatus] = useState<string | null>(null);
  const [lists, setLists] = useState<SharedList[]>([]);
  const [taskLists, setTaskLists] = useState<TaskList[]>([]);

  const loadKeys = async () => {
    const k = await api.getAPIKeys();
    setKeys(k);
  };

  useEffect(() => {
    loadKeys();
    api.getAllLists().then(setLists).catch(() => {});
    api.getTaskLists().then(setTaskLists).catch(() => {});
  }, []);

  // Editing an existing key: name and rights (the secret stays the same)
  const [editKeyId, setEditKeyId] = useState<string | null>(null);
  const [editName, setEditName] = useState('');
  const [editScopes, setEditScopes] = useState<ApiKeyScope[]>([]);
  const [editError, setEditError] = useState<string | null>(null);

  const startEdit = (k: APIKey) => {
    setEditKeyId(k.id);
    setEditName(k.name);
    setEditScopes(k.scopes.split(',').filter(Boolean) as ApiKeyScope[]);
    setEditError(null);
  };

  const toggleEditScope = (id: ApiKeyScope) => {
    setEditScopes((prev) => {
      const next = prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id];
      return next.length > 0 ? next : prev; // at least one
    });
  };

  const handleSaveEdit = async () => {
    if (!editKeyId) return;
    try {
      await api.updateAPIKey(editKeyId, { name: editName.trim(), scopes: editScopes });
      triggerHaptic(15);
      setEditKeyId(null);
      await loadKeys();
    } catch (err: any) {
      setEditError(err?.message || 'Speichern fehlgeschlagen');
    }
  };

  // Switches grouped by tasks, lists and inbox (same layout for a new and an existing key)
  const renderScopeSwitches = (selected: ApiKeyScope[], toggle: (id: ApiKeyScope) => void, label: string) => (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-3" role="group" aria-label={label}>
      {SCOPE_GROUPS.map(([group, heading]) => (
        <div key={group} className="border border-border rounded-card bg-panel px-3 py-1.5">
          <p className="text-[11px] text-muted pt-1 pb-0.5 font-semibold">{heading}</p>
          {SCOPES.filter((sc) => sc.group === group).map((sc) => (
            <div key={sc.id} className="flex items-center justify-between gap-3 min-h-[44px] sm:min-h-[36px]">
              <div className="min-w-0">
                <span className="block text-xs text-main">{sc.label}</span>
                <span className="block text-[11px] text-muted">{sc.hint}</span>
              </div>
              <ToggleSwitch checked={selected.includes(sc.id)} onChange={() => toggle(sc.id)} title={sc.chip} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );

  const toggleScope = (id: ApiKeyScope) => {
    setNewKeyScopes((prev) => {
      const next = prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id];
      return next.length > 0 ? next : prev; // at least one
    });
  };

  const handleCreateKey = async (e: React.FormEvent) => {
    e.preventDefault();
    triggerHaptic(15);
    const created = await api.createAPIKey(newKeyName.trim() || 'Home Assistant', newKeyScopes);
    if (created.rawKey) {
      setNewlyCreatedKey(created.rawKey);
    }
    setNewKeyName('');
    setNewKeyScopes(['webhook:triage']);
    await loadKeys();
  };

  const handleDeleteKey = async (id: string) => {
    if (!window.confirm('Diesen API-Schlüssel wirklich widerrufen?')) return;
    triggerHaptic(20);
    await api.deleteAPIKey(id);
    await loadKeys();
  };

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedKey(true);
    setTimeout(() => setCopiedKey(false), 2000);
  };

  const handleSimulateWebhook = async () => {
    triggerHaptic(20);
    if (simTarget === 'list_item' && !simListId) {
      setSimStatus('❌ Bitte eine Liste wählen.');
      return;
    }
    try {
      // With a freshly created key the simulator tests exactly that key (and its scopes)
      await api.testWebhookIngest(newlyCreatedKey, {
        title: simTitle,
        priority: simPriority,
        tags: simTarget === 'list_item' ? [] : ['smarthome', 'automation'],
        target: simTarget,
        taskListId: simTarget === 'task' ? simTaskListId || undefined : undefined,
        listId: simTarget === 'list_item' ? simListId : undefined,
      });
      setSimStatus(
        simTarget === 'task'
          ? '✅ Webhook erfolgreich ausgelöst! Die Aufgabe ist angelegt.'
          : simTarget === 'list_item'
          ? '✅ Webhook erfolgreich ausgelöst! Der Eintrag steht in der Liste.'
          : '✅ Webhook erfolgreich ausgelöst! Neue Karte liegt in deiner Inbox.'
      );
      onIngested?.();
      setTimeout(() => setSimStatus(null), 4000);
    } catch (err: any) {
      setSimStatus(`❌ Fehler: ${err.message}`);
    }
  };

  const exampleToken = newlyCreatedKey || 'mindsift_sec_dein_api_key';
  const baseUrl = window.location.origin;
  const examplePayload =
    simTarget === 'task'
      ? `{
    "target": "task",
    "title": "Filter der Lüftungsanlage wechseln",
    "priority": "high",
    "dueDate": "2026-11-15T09:00"${simTaskListId ? `,\n    "taskListId": "${simTaskListId}"` : ''}
  }`
      : simTarget === 'list_item'
      ? `{
    "target": "list_item",
    "listId": "${simListId || 'ID_DER_LISTE'}",
    "content": "Hafermilch",
    "quantity": "2"
  }`
      : `{
    "title": "Kellerfeuchtigkeit über 70%",
    "priority": "urgent",
    "tags": ["smarthome", "keller"]
  }`;

  const mcpUrl = `${baseUrl}/api/v1/mcp`;
  const mcpSnippet =
    mcpClient === 'claude'
      ? `claude mcp add --transport http mindsift ${mcpUrl} \\
  --header "X-API-Key: ${exampleToken}"`
      : mcpClient === 'codex'
      ? `# ~/.codex/config.toml
[mcp_servers.mindsift]
url = "${mcpUrl}"
http_headers = { "X-API-Key" = "${exampleToken}" }`
      : `{
  "mcpServers": {
    "mindsift": {
      "type": "http",
      "url": "${mcpUrl}",
      "headers": { "X-API-Key": "${exampleToken}" }
    }
  }
}`;

  return (
    <div className="space-y-6">
      {/* API keys */}
      <div>
        <div className="flex items-center gap-3 mb-2">
          <div className="w-8 h-8 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
            <Key className="w-4 h-4" />
          </div>
          <div>
            <h3 className="text-sm font-bold text-main">API-Schlüssel</h3>
            <p className="text-xs text-muted">
              Ein Schlüssel verbindet Home Assistant, n8n, eigene Skripte oder KI-Agenten (Claude Code, Codex …) mit
              MindSift. Was er darf, legst du mit den Schaltern fest; das gilt per curl und per MCP gleich. Notizen und
              Einstellungen bleiben für Schlüssel gesperrt. Was ein Schlüssel anlegt oder ändert, trägt seinen Namen als
              Badge.
            </p>
          </div>
        </div>

        <form onSubmit={handleCreateKey} className="mt-3 space-y-2">
          <div className="flex flex-col sm:flex-row gap-2">
            <input
              type="text"
              value={newKeyName}
              onChange={(e) => setNewKeyName(e.target.value)}
              placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
              className="w-full sm:flex-1 min-w-0 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
            />
            <button type="submit" className="btn-primary h-11 sm:h-9 px-4 text-sm flex items-center justify-center gap-1.5">
              <Plus className="w-4 h-4" />
              <span>API-Key erzeugen</span>
            </button>
          </div>
          {renderScopeSwitches(newKeyScopes, toggleScope, 'Berechtigungen des Schlüssels')}
        </form>

        {newlyCreatedKey && (
          <div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
            <div className="min-w-0">
              <p className="text-xs font-semibold text-accent mb-1">Neuer API-Schlüssel erstellt (bitte jetzt kopieren):</p>
              <code className="text-xs sm:text-sm font-mono text-main break-all">{newlyCreatedKey}</code>
            </div>
            <button onClick={() => handleCopy(newlyCreatedKey)} className="btn-primary h-8 px-3 text-xs">
              {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
              <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
            </button>
          </div>
        )}

        {/* Active Keys List */}
        <div className="mt-3 border border-border divide-y divide-border">
          {keys.length === 0 ? (
            <p className="text-xs text-faint px-3 py-2">Noch keine dedizierten API-Schlüssel hinterlegt.</p>
          ) : (
            keys.map((k) =>
              editKeyId === k.id ? (
                <div key={k.id} className="px-3 py-3 bg-canvas space-y-2">
                  <div className="flex flex-col sm:flex-row gap-2">
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      aria-label="Name des Schlüssels"
                      className="w-full sm:flex-1 min-w-0 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
                    />
                    <div className="flex gap-2">
                      <button type="button" onClick={() => setEditKeyId(null)} className="btn-action h-11 sm:h-9 px-3 text-xs flex-1 sm:flex-none">
                        Abbrechen
                      </button>
                      <button
                        type="button"
                        onClick={handleSaveEdit}
                        disabled={!editName.trim()}
                        className="btn-primary h-11 sm:h-9 px-4 text-xs flex-1 sm:flex-none disabled:opacity-40"
                      >
                        Speichern
                      </button>
                    </div>
                  </div>
                  {renderScopeSwitches(editScopes, toggleEditScope, `Berechtigungen von ${k.name}`)}
                  <p className="text-[11px] text-faint">
                    Der Schlüssel selbst bleibt gleich; Geräte und Agenten, die ihn nutzen, müssen nichts ändern. Die neuen
                    Rechte gelten ab sofort.
                  </p>
                  {editError && <p className="text-[11px] text-status-err">{editError}</p>}
                </div>
              ) : (
              <div key={k.id} className="px-3 py-2 bg-canvas flex items-center justify-between gap-3">
                <div className="min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1">
                  <span className="text-sm font-medium text-main">{k.name}</span>
                  <span className="text-xs font-mono text-accent">{k.keyPrefix}</span>
                  {k.scopes
                    .split(',')
                    .filter(Boolean)
                    .map((sc) => (
                      <span key={sc} className="px-1.5 py-0.5 rounded-btn border border-border text-muted text-[10px]">
                        {scopeChip(sc)}
                      </span>
                    ))}
                  {k.lastUsedAt && (
                    <span className="text-xs text-faint">
                      Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  <button
                    onClick={() => startEdit(k)}
                    className="btn-icon w-7 h-7"
                    aria-label={`API-Key ${k.name} bearbeiten`}
                    title="Name und Rechte ändern"
                  >
                    <Pencil className="w-3.5 h-3.5" />
                  </button>
                  <button
                    onClick={() => handleDeleteKey(k.id)}
                    className="btn-icon btn-icon-danger w-7 h-7"
                    aria-label={`API-Key ${k.name} löschen`}
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
              )
            )
          )}
        </div>
      </div>

      {/* How to connect: one API, two accesses */}
      <div className="pt-4 border-t border-border space-y-4">
        <div className="flex flex-wrap gap-1.5" role="tablist" aria-label="Zugang">
          {(
            [
              ['rest', 'curl / Smart Home', Terminal],
              ['mcp', 'KI-Agenten (MCP)', Bot],
            ] as const
          ).map(([value, label, Icon]) => (
            <button
              key={value}
              type="button"
              role="tab"
              aria-selected={access === value}
              onClick={() => setAccess(value)}
              className={`h-11 sm:h-8 px-3 rounded-btn border text-xs flex items-center gap-1.5 transition-colors ${
                access === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
              }`}
            >
              <Icon className="w-3.5 h-3.5 text-accent" />
              {label}
            </button>
          ))}
        </div>

        {access === 'rest' && (
          <div className="space-y-5">
            {/* Reading: e.g. a smart home sensor for what is due today */}
            <div>
              <div className="flex items-center gap-2 text-xs font-medium text-muted mb-2">
                <Terminal className="w-3.5 h-3.5 text-accent" />
                <span>Lesen, z. B. was heute fällig ist (Recht „Aufgaben lesen“):</span>
              </div>
              <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
{`curl "${baseUrl}/api/v1/tasks?due=today&status=open" \\
  -H "X-API-Key: ${exampleToken}"`}
              </pre>
              <p className="mt-2 text-[11px] text-faint">
                Filter: <code className="font-mono">due=today</code>, <code className="font-mono">due=overdue</code> oder ein
                Datum (<code className="font-mono">JJJJ-MM-TT</code>, fällig bis einschließlich), <code className="font-mono">status=open|done</code>,{' '}
                <code className="font-mono">taskListId</code>. Listen: <code className="font-mono">GET /api/v1/lists</code> und{' '}
                <code className="font-mono">/lists/ID</code>. Mit „Ändern“ auch <code className="font-mono">PATCH /api/v1/thoughts/ID</code>{' '}
                (z. B. <code className="font-mono">{'{"isCompleted": true}'}</code>).
              </p>
              <div className="flex items-center gap-2 text-xs font-medium text-muted mt-3 mb-2">
                <Terminal className="w-3.5 h-3.5 text-accent" />
                <span>Home Assistant: Sensor „Heute fällig“ (configuration.yaml)</span>
              </div>
              <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
{`rest:
  - resource: "${baseUrl}/api/v1/tasks?due=today&status=open"
    headers:
      X-API-Key: "${exampleToken}"
    scan_interval: 900
    sensor:
      - name: "MindSift heute fällig"
        value_template: "{{ value_json | length }}"`}
              </pre>
            </div>

            <div className="pt-4 border-t border-border">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
                  <Webhook className="w-4 h-4" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-main">Einliefern testen (Webhook)</h3>
                  <p className="text-xs text-muted">
                    Teste das Einliefern per <code className="font-mono">POST /api/v1/webhooks/ingest</code> direkt hier
                    {newlyCreatedKey ? ' – mit dem eben erzeugten Key und seinen Berechtigungen.' : ' – mit deiner Anmeldung.'}
                  </p>
                </div>
              </div>

              <div className="flex flex-wrap gap-1.5 mb-3" role="radiogroup" aria-label="Ziel">
                {(
                  [
                    ['triage', '📥 Inbox'],
                    ['task', '📋 Aufgabe'],
                    ['list_item', '📝 Listeneintrag'],
                  ] as const
                ).map(([value, label]) => (
                  <button
                    key={value}
                    type="button"
                    role="radio"
                    aria-checked={simTarget === value}
                    onClick={() => setSimTarget(value)}
                    className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
                    simTarget === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
                  }`}
                  >
                    {label}
                  </button>
                ))}
                {simTarget === 'list_item' && (
                  <select
                    value={simListId}
                    onChange={(e) => setSimListId(e.target.value)}
                    className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
                    aria-label="Liste"
                  >
                    <option value="">Liste wählen…</option>
                    {lists.map((l) => (
                      <option key={l.id} value={l.id}>
                        {l.icon} {l.title}
                      </option>
                    ))}
                  </select>
              )}
                {simTarget === 'task' && (
                  <select
                    value={simTaskListId}
                    onChange={(e) => setSimTaskListId(e.target.value)}
                    className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
                    aria-label="Aufgabenliste"
                  >
                    <option value="">Ohne Aufgabenliste</option>
                    {taskLists.map((tl) => (
                      <option key={tl.id} value={tl.id}>
                        {tl.icon} {tl.title}
                      </option>
                    ))}
                  </select>
              )}
              </div>

              {simTarget === 'triage' && (
                <div className="flex flex-wrap gap-1.5 mb-3">
                  {[
                    { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
                    { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
                    { label: '💧 Luftfeuchtigkeit Keller', text: 'Kellerfeuchtigkeit über 70% – Lüften oder Entfeuchter starten', prio: 'urgent' as PriorityLevel },
                  ].map((preset) => (
                    <button
                      key={preset.label}
                      type="button"
                      onClick={() => {
                        setSimTitle(preset.text);
                        setSimPriority(preset.prio);
                      }}
                      className="btn-action text-xs"
                    >
                      {preset.label}
                    </button>
                  ))}
                </div>
            )}

              <div className="flex flex-col sm:flex-row gap-2">
                <input
                  type="text"
                  value={simTitle}
                  onChange={(e) => setSimTitle(e.target.value)}
                  className="flex-1 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
                />
                <button
                  type="button"
                  onClick={handleSimulateWebhook}
                  className="btn-primary h-11 sm:h-9 px-4 text-xs sm:text-sm flex items-center justify-center gap-1.5"
                >
                  <Zap className="w-4 h-4" />
                  <span>Webhook jetzt abfeuern</span>
                </button>
              </div>

              {simStatus && (
                <p className={`mt-3 text-xs font-medium ${simStatus.startsWith('❌') ? 'text-status-err' : 'text-status-ok'}`}>{simStatus}</p>
            )}

              {/* Code Example Snippets */}
              <div className="mt-4 space-y-2">
                <div className="flex items-center gap-2 text-xs font-medium text-muted">
                  <Terminal className="w-3.5 h-3.5 text-accent" />
                  <span>cURL / Home Assistant REST Command:</span>
                </div>
                <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest" \\
  -H "X-API-Key: ${exampleToken}" \\
  -H "Content-Type: application/json" \\
  -d '${examplePayload}'`}
                </pre>
                <p className="text-[11px] text-faint">
                  Der Key gehört in den Header <code className="font-mono">X-API-Key</code>, nicht in die URL, damit er nicht in
                  Proxy-Logs landet. Fehlt dem Key die Berechtigung für das Ziel, antwortet der Server mit 403.
                </p>
              </div>
            </div>
          </div>
        )}

        {access === 'mcp' && (
          <div>
            <div className="flex items-center gap-3 mb-3">
              <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
                <Bot className="w-4 h-4" />
              </div>
              <div>
                <h3 className="text-sm font-bold text-main">KI-Agenten anbinden (MCP)</h3>
                <p className="text-xs text-muted">
                  MindSift ist ein MCP-Server: Claude Code, Codex, Claude Desktop, Cursor und eigene Agenten nutzen dieselben
                  Schlüssel und Rechte wie curl, nur in der Form, die Agenten erwarten.
                </p>
              </div>
            </div>

            <div className="flex flex-wrap gap-1.5 mb-2" role="radiogroup" aria-label="Agent">
              {(
                [
                  ['claude', 'Claude Code'],
                  ['codex', 'OpenAI Codex'],
                  ['json', 'Claude Desktop / Cursor'],
                ] as const
              ).map(([value, label]) => (
                <button
                  key={value}
                  type="button"
                  role="radio"
                  aria-checked={mcpClient === value}
                  onClick={() => setMcpClient(value)}
                  className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
                    mcpClient === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
            <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">{mcpSnippet}</pre>
            <p className="mt-2 text-[11px] text-faint">
              Werkzeuge: <code className="font-mono">list_task_lists</code>, <code className="font-mono">create_task_list</code>,{' '}
              <code className="font-mono">list_tasks</code>, <code className="font-mono">get_task</code>,{' '}
              <code className="font-mono">create_task</code>, <code className="font-mono">update_task</code>,{' '}
              <code className="font-mono">complete_task</code>, <code className="font-mono">delete_task</code>,{' '}
              <code className="font-mono">list_lists</code>, <code className="font-mono">create_list</code>,{' '}
              <code className="font-mono">get_list</code>, <code className="font-mono">add_list_item</code>,{' '}
              <code className="font-mono">check_list_item</code>, <code className="font-mono">update_list_item</code>,{' '}
              <code className="font-mono">search</code>, <code className="font-mono">capture_to_inbox</code>. Der Agent sieht
              nur die Werkzeuge, für die der Schlüssel berechtigt ist; Freigaben gelten wie für dich selbst. ChatGPT im Browser und claude.ai brauchen OAuth und
              werden noch nicht unterstützt.
            </p>
          </div>
        )}
      </div>
    </div>
  );
};