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

interface EcosystemViewProps {
  onIngested: () => void;
}

export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
  const [keys, setKeys] = useState<APIKey[]>([]);
  const [newKeyName, setNewKeyName] = useState('');
  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 [simStatus, setSimStatus] = useState<string | null>(null);

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

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

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

  const handleDeleteKey = async (id: string) => {
    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);
    const tokenToUse = newlyCreatedKey || getToken() || '';
    try {
      await api.testWebhookIngest(tokenToUse, simTitle, simPriority, ['smarthome', 'automation']);
      setSimStatus('✅ Webhook erfolgreich ausgelöst! Neue Karte liegt in deiner Inbox.');
      onIngested();
      setTimeout(() => setSimStatus(null), 4000);
    } catch (err: any) {
      setSimStatus(`❌ Fehler: ${err.message}`);
    }
  };

  const handleFullExport = async () => {
    triggerHaptic(15);
    const data = await api.exportAll();
    const blob = new Blob([JSON.stringify(data, null, 2)], {
      type: 'application/json;charset=utf-8',
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `mindsift-backup-${new Date().toISOString().slice(0, 10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const exampleToken = newlyCreatedKey || 'mindsift_sec_dein_api_key';
  const baseUrl = window.location.origin;

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Section 1: API Keys for Smarthome & Automation */}
      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm">
            <Key className="w-5 h-5" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">
              Webhooks & Ingestion API-Schlüssel
            </h3>
            <p className="text-xs sm:text-sm text-zinc-400">
              Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
            </p>
          </div>
        </div>

        <form onSubmit={handleCreateKey} className="mt-5 flex flex-col sm:flex-row gap-2.5">
          <input
            type="text"
            value={newKeyName}
            onChange={(e) => setNewKeyName(e.target.value)}
            placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
          />
          <button
            type="submit"
            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
          >
            <Plus className="w-4 h-4" />
            <span>API-Key erzeugen</span>
          </button>
        </form>

        {newlyCreatedKey && (
          <div className="mt-4 p-4 rounded-2xl bg-[#22c55e]/15 border border-[#22c55e]/30 flex flex-wrap items-center justify-between gap-3">
            <div className="min-w-0">
              <p className="text-xs font-semibold text-[#22c55e] mb-1">
                Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
              </p>
              <code className="text-xs sm:text-sm font-mono text-white break-all">
                {newlyCreatedKey}
              </code>
            </div>
            <button
              onClick={() => handleCopy(newlyCreatedKey)}
              className="h-9 px-4 rounded-full bg-[#22c55e] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#16a34a] transition-colors shadow-sm"
            >
              {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-5 space-y-2">
          {keys.length === 0 ? (
            <p className="text-xs text-zinc-500 py-2">
              Noch keine dedizierten API-Schlüssel hinterlegt.
            </p>
          ) : (
            keys.map((k) => (
              <div
                key={k.id}
                className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3"
              >
                <div>
                  <span className="text-sm font-medium text-white">{k.name}</span>
                  <span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
                  {k.lastUsedAt && (
                    <span className="ml-3 text-xs text-zinc-500">
                      Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
                    </span>
                  )}
                </div>
                <button
                  onClick={() => handleDeleteKey(k.id)}
                  className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Section 2: Interactive Smarthome Webhook Simulator */}
      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm">
            <Webhook className="w-5 h-5" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">
              Live Smarthome Webhook-Simulator
            </h3>
            <p className="text-xs sm:text-sm text-zinc-400">
              Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
            </p>
          </div>
        </div>

        <div className="flex flex-wrap gap-2 mb-4">
          {[
            { 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="px-3.5 py-1.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
            >
              {preset.label}
            </button>
          ))}
        </div>

        <div className="flex flex-col sm:flex-row gap-2.5">
          <input
            type="text"
            value={simTitle}
            onChange={(e) => setSimTitle(e.target.value)}
            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
          />
          <button
            type="button"
            onClick={handleSimulateWebhook}
            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
          >
            <Zap className="w-4 h-4" />
            <span>Webhook jetzt abfeuern</span>
          </button>
        </div>

        {simStatus && (
          <p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p>
        )}

        {/* Code Example Snippets */}
        <div className="mt-6 space-y-3">
          <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
            <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
            <span>cURL / Home Assistant REST Command:</span>
          </div>
          <pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
  -H "Content-Type: application/json" \\
  -d '{
    "title": "Kellerfeuchtigkeit über 70%",
    "priority": "urgent",
    "tags": ["smarthome", "keller"]
  }'`}
          </pre>
        </div>
      </div>

      {/* Section 3: Data Sovereignty & Export */}
      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm">
            <ShieldCheck className="w-5 h-5" />
          </div>
          <div>
            <h3 className="text-base font-bold text-white">
              100 % Datensouveränität & Komplett-Export
            </h3>
            <p className="text-xs sm:text-sm text-zinc-400">
              Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
            </p>
          </div>
        </div>

        <button
          onClick={handleFullExport}
          className="h-11 px-6 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
        >
          <Download className="w-4 h-4" />
          <span>Komplett-Backup (.json)</span>
        </button>
      </div>
    </div>
  );
};