/**
 * Einstellungen — Verwalte Kanäle, Integrationen, Branding und Systemregeln
 * Referenz: docs/design-references/screen-einstellungen.png
 */

import { useState } from 'react';
import { RefreshCw, Edit, MoreVertical, Plus, ExternalLink } from 'lucide-react';
import { toast } from 'sonner';

const SETTING_TABS = ['Allgemein', 'Kanäle', 'Integrationen', 'Branding', 'Affiliate', 'Freigaben', 'Automationen', 'Team'];

const CHANNELS = [
  { name: 'TikTok', handle: '@atlas_social', status: 'Verbunden', color: '#00d4ff' },
  { name: 'Instagram', handle: '@atlas.social', status: 'Verbunden', color: '#e1306c' },
  { name: 'LinkedIn', handle: 'ATLAS Social', status: 'Verbunden', color: '#0077b5' },
  { name: 'X (Twitter)', handle: '@ATLAS_social', status: 'Verbunden', color: '#94a3b8' },
  { name: 'YouTube Shorts', handle: 'ATLAS Social', status: 'Verbunden', color: '#ff0000' },
];

const INTEGRATIONS = [
  { name: 'Postiz API', id: 'API Key: ••••••••••••••8f3a', status: 'Aktiv', color: '#10b981' },
  { name: 'n8n Workflow', id: 'Workflow-ID: atlas-pipeline-v2\nLetzter Lauf: 26.05.2025, 09:35', status: 'Aktiv', color: '#10b981', action: 'Ausführen' },
  { name: 'Webhook Listener', id: 'Endpoint: /webhook/atlas\nStatus: Fehlerfrei', status: 'Aktiv', color: '#10b981', action: 'Logs anzeigen' },
];

const UTM_RULES = [
  { label: 'Quelle (utm_source)', value: 'atlas_social' },
  { label: 'Medium (utm_medium)', value: 'social' },
  { label: 'Kampagne (utm_campaign)', value: '{{campaign_name}}' },
  { label: 'Content (utm_content)', value: '{{content_type}}-{{platform}}' },
  { label: 'Term (utm_term)', value: '{{product_name}}' },
];

const TEAM_ROLES = [
  { role: 'Administratoren', count: 4 },
  { role: 'Editoren', count: 9 },
  { role: 'Reviewer', count: 6 },
  { role: 'Freigeber', count: 3 },
  { role: 'Beobachter', count: 12 },
];

const HEALTH_ITEMS = [
  { label: 'Kanal-Sync', detail: 'Alle Kanäle synchron\nLetzter Sync: 09:38', status: 'ok' },
  { label: 'API-Verbindungen', detail: 'Alle APIs aktiv\nFehlerfrei', status: 'ok' },
  { label: 'Datenbank', detail: 'Normal\nLatenz: 12ms', status: 'ok' },
  { label: 'Speicher', detail: '42% verwendet\n1,2 GB / 2,9 GB', status: 'warn' },
  { label: 'Automationen', detail: '14 aktiv\n2 pausiert', status: 'ok' },
];

const CHANNEL_ICONS: Record<string, string> = { TikTok: '🎵', Instagram: '📸', LinkedIn: '💼', 'X (Twitter)': '✗', 'YouTube Shorts': '▶' };

export default function Settings() {
  const [activeTab, setActiveTab] = useState('Allgemein');
  const [utmRules, setUtmRules] = useState(UTM_RULES);

  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Einstellungen</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verwalte Kanäle, Integrationen, Branding und Systemregeln.</p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>26. Mai 2025, 09:41</span>
          <button className="atlas-btn-ghost p-1.5"><RefreshCw size={13} /></button>
        </div>
      </div>

      {/* KPI Bar */}
      <div className="grid grid-cols-4 gap-3">
        {[
          { label: 'Verbundene Kanäle', value: '5 / 5', sub: 'Alle Systeme verbunden', color: '#10b981' },
          { label: 'Integrationen aktiv', value: '6 / 8', sub: '75% aktiv', color: '#a78bfa' },
          { label: 'Branding-Assets', value: '24', sub: 'Aktiv & aktuell', color: '#60a5fa' },
          { label: 'Automationsregeln', value: '18', sub: '14 aktiv', color: '#f59e0b' },
        ].map((kpi, i) => (
          <div key={i} className="atlas-kpi-card">
            <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)' }}>{kpi.label}</div>
            <div className="text-xl font-bold" style={{ fontFamily: 'var(--font-mono)', color: kpi.color }}>{kpi.value}</div>
            <div className="text-xs mt-1" style={{ color: 'var(--muted-foreground)' }}>{kpi.sub}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div className="flex gap-1 overflow-x-auto" style={{ borderBottom: '1px solid var(--atlas-border)', paddingBottom: '0' }}>
        {SETTING_TABS.map(tab => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className="px-3 py-2 text-xs whitespace-nowrap transition-all"
            style={{
              color: activeTab === tab ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
              borderBottom: activeTab === tab ? '2px solid var(--atlas-cyan)' : '2px solid transparent',
              fontFamily: 'var(--font-body)',
            }}
          >
            {tab}
          </button>
        ))}
      </div>

      {/* Content Grid */}
      <div className="grid grid-cols-3 gap-4">
        {/* Verbundene Kanäle */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Verbundene Kanäle</h2>
          </div>
          <div className="space-y-2">
            {CHANNELS.map(ch => (
              <div key={ch.name} className="flex items-center gap-2 p-2 rounded" style={{ background: 'var(--atlas-navy)' }}>
                <span style={{ fontSize: '16px' }}>{CHANNEL_ICONS[ch.name]}</span>
                <div className="flex-1 min-w-0">
                  <div className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>{ch.name}</div>
                  <div className="text-xs" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>{ch.handle}</div>
                </div>
                <div className="flex items-center gap-1">
                  <div className="atlas-status-dot online" />
                  <span className="text-xs" style={{ color: 'var(--atlas-green)', fontSize: '0.6rem' }}>{ch.status}</span>
                </div>
                <button className="text-xs px-2 py-0.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>
                  Verwalten
                </button>
                <button style={{ color: 'var(--muted-foreground)' }}><MoreVertical size={12} /></button>
              </div>
            ))}
          </div>
          <button className="text-xs mt-2 flex items-center gap-1" style={{ color: 'var(--atlas-cyan)' }}>
            <Plus size={11} /> Kanal verbinden
          </button>
        </div>

        {/* API & Automatisierung */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>API & Automatisierung</h2>
          </div>
          <div className="space-y-2">
            {INTEGRATIONS.map((int, i) => (
              <div key={i} className="p-2 rounded" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)' }}>
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>{int.name}</span>
                  <div className="flex items-center gap-1.5">
                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ background: 'oklch(0.65 0.15 165 / 0.15)', color: 'var(--atlas-green)', border: '1px solid oklch(0.65 0.15 165 / 0.25)', fontSize: '0.6rem' }}>
                      ● {int.status}
                    </span>
                    <button style={{ color: 'var(--muted-foreground)' }}><MoreVertical size={11} /></button>
                  </div>
                </div>
                <div className="text-xs whitespace-pre-line" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>{int.id}</div>
                {int.action && (
                  <button
                    className="text-xs mt-1.5 px-2 py-1 rounded"
                    style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)', fontSize: '0.6rem' }}
                    onClick={() => toast.success(`${int.action} ausgeführt`)}
                  >
                    {int.action}
                  </button>
                )}
              </div>
            ))}
          </div>
          <button className="text-xs mt-2 flex items-center gap-1" style={{ color: 'var(--atlas-cyan)' }}>
            <Plus size={11} /> Integration hinzufügen
          </button>
        </div>

        {/* UTM Standardregeln */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>UTM Standardregeln</h2>
            <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Bearbeiten</button>
          </div>
          <div className="space-y-2">
            {utmRules.map((rule, i) => (
              <div key={i}>
                <div className="text-xs mb-0.5" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>{rule.label}</div>
                <input
                  className="atlas-input text-xs"
                  value={rule.value}
                  onChange={e => setUtmRules(prev => prev.map((r, ri) => ri === i ? { ...r, value: e.target.value } : r))}
                />
              </div>
            ))}
          </div>
          <button className="text-xs mt-2" style={{ color: 'var(--atlas-cyan)' }}>Vorschau & Test →</button>
        </div>

        {/* Branding & Assets */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Branding & Assets</h2>
            <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Bearbeiten</button>
          </div>
          <div className="grid grid-cols-3 gap-3 mb-3">
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Logo (Standard)</div>
              <div className="flex items-center justify-center rounded p-2" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)', height: '60px' }}>
                <div className="text-2xl">🔺</div>
              </div>
              <button className="text-xs mt-1 w-full text-center" style={{ color: 'var(--atlas-cyan)' }}>Aktualisieren</button>
            </div>
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Favicon</div>
              <div className="flex items-center justify-center rounded p-2" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)', height: '60px' }}>
                <div className="text-lg">🔺</div>
              </div>
              <button className="text-xs mt-1 w-full text-center" style={{ color: 'var(--atlas-cyan)' }}>Aktualisieren</button>
            </div>
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Primärfarbe</div>
              <div className="flex items-center gap-1.5 p-2 rounded" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)', height: '60px' }}>
                <div className="w-6 h-6 rounded" style={{ background: '#00A3FF' }} />
                <span className="text-xs font-mono" style={{ color: 'var(--foreground)' }}>#00A3FF</span>
              </div>
            </div>
          </div>
          <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Alle Branding-Assets verwalten →</button>
        </div>

        {/* Freigabe-Workflow */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Freigabe-Workflow</h2>
            <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Bearbeiten</button>
          </div>
          <div className="space-y-2">
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Workflow-Typ</div>
              <select className="atlas-input text-xs">
                <option>Mehrstufige Freigabe</option>
                <option>Einfache Freigabe</option>
              </select>
            </div>
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Schritte</div>
              <div className="flex items-center gap-1 p-2 rounded" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)' }}>
                <span className="text-xs">😊 Ersteller</span>
                <span style={{ color: 'var(--atlas-border)' }}>→</span>
                <span className="text-xs">👤 Reviewer</span>
                <span style={{ color: 'var(--atlas-border)' }}>→</span>
                <span className="text-xs">✅ Freigeber</span>
              </div>
            </div>
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Erforderliche Freigaben</div>
              <select className="atlas-input text-xs">
                <option>Alle Schritte erforderlich</option>
              </select>
            </div>
            <div>
              <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Frist für Freigabe</div>
              <select className="atlas-input text-xs">
                <option>3 Tage</option>
                <option>1 Tag</option>
                <option>7 Tage</option>
              </select>
            </div>
          </div>
          <button className="text-xs mt-2" style={{ color: 'var(--atlas-cyan)' }}>Workflow-Vorlagen verwalten →</button>
        </div>

        {/* Team & Rollen */}
        <div className="atlas-card p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Team & Rollen</h2>
            <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Verwalten</button>
          </div>
          <div className="space-y-2">
            {TEAM_ROLES.map(r => (
              <div key={r.role} className="flex items-center gap-2">
                <div className="w-6 h-6 rounded-full flex items-center justify-center text-xs" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)' }}>
                  👤
                </div>
                <span className="text-xs flex-1" style={{ color: 'var(--foreground)' }}>{r.role}</span>
                <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>{r.count} Mitglieder</span>
                <button style={{ color: 'var(--muted-foreground)' }}><MoreVertical size={11} /></button>
              </div>
            ))}
          </div>
          <button className="text-xs mt-2" style={{ color: 'var(--atlas-cyan)' }}>Rollen & Berechtigungen verwalten →</button>
        </div>
      </div>

      {/* System Health */}
      <div className="atlas-card p-4">
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>System-Health & Sync-Status</h2>
          <button className="atlas-btn-primary text-xs">System-Logs · Alle Logs anzeigen</button>
        </div>
        <div className="grid grid-cols-5 gap-3">
          {HEALTH_ITEMS.map(item => (
            <div key={item.label} className="p-3 rounded" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)' }}>
              <div className="flex items-center gap-1.5 mb-1">
                <span style={{ fontSize: '14px' }}>{item.status === 'ok' ? '✅' : '⚠️'}</span>
                <span className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>{item.label}</span>
              </div>
              <div className="text-xs whitespace-pre-line" style={{ color: item.status === 'ok' ? 'var(--atlas-green)' : 'var(--atlas-amber)', fontSize: '0.6rem' }}>
                {item.detail}
              </div>
            </div>
          ))}
        </div>
        <div className="flex items-center justify-between mt-3 pt-3" style={{ borderTop: '1px solid var(--atlas-border)' }}>
          <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>Einstellungen-Version: v2.8.1</span>
          <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>Letzte Änderung: 26.05.2025, 09:21 von Anna K.</span>
          <button className="text-xs" style={{ color: 'var(--atlas-cyan)' }}>Änderungshistorie anzeigen →</button>
        </div>
      </div>
    </div>
  );
}
