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

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

// What a key may deliver; keys never read anything
const SCOPES: { id: ApiKeyScope; label: string; hint: string }[] = [
  { id: 'webhook:triage', label: '📥 Triage / Inbox', hint: 'Gedanken in die Inbox' },
  { id: 'webhook:task', label: '📋 Aufgaben', hint: 'Aufgaben direkt anlegen' },
  { id: 'webhook:list', label: '📝 Listeneinträge', hint: 'Einträge zu Listen hinzufügen' },
];
const scopeLabel = (id: string) => SCOPES.find((s) => s.id === id)?.label || id;

type SimTarget = 'triage' | 'task' | 'list_item';

// Personal API keys with scopes, a simulator and copyable examples (settings → Private Webhooks)
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);

  // 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(() => {});
  }, []);

  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"]
  }`;

  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">Webhooks & Ingestion API-Schlüssel</h3>
            <p className="text-xs text-muted">
              Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs mit MindSift. Ein Key kann nur Daten
              einliefern, nie lesen; was genau, legst du pro Key fest.
            </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>
          <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Berechtigungen des Keys">
            <span className="text-xs text-muted">Darf einliefern:</span>
            {SCOPES.map((sc) => {
              const on = newKeyScopes.includes(sc.id);
              return (
                <button
                  key={sc.id}
                  type="button"
                  role="checkbox"
                  aria-checked={on}
                  title={sc.hint}
                  onClick={() => toggleScope(sc.id)}
                  className={`h-11 sm:h-8 px-3 rounded-btn border text-xs inline-flex items-center gap-1.5 transition-colors ${
                    on ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
                  }`}
                >
                  {on && <Check className="w-3.5 h-3.5 text-accent" />}
                  {sc.label}
                </button>
              );
            })}
          </div>
        </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) => (
              <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-[10px] text-muted">
                        {scopeLabel(sc)}
                      </span>
                    ))}
                  {k.lastUsedAt && (
                    <span className="text-xs text-faint">
                      Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
                    </span>
                  )}
                </div>
                <button
                  onClick={() => handleDeleteKey(k.id)}
                  className="btn-icon btn-icon-danger w-7 h-7 shrink-0"
                  aria-label={`API-Key ${k.name} löschen`}
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Simulator */}
      <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">Live Smarthome Webhook-Simulator</h3>
            <p className="text-xs text-muted">
              Teste den Webhook-Endpunkt 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>
  );
};