/**
 * Signale — Hochpotenzielle Themen & Chancen aus allen ATLAS-Systemen
 * Referenz: docs/design-references/screen-signale.png
 */

import { useState } from 'react';
import { useLocation } from 'wouter';
import { Star, TrendingUp, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';

const FILTER_TABS = ['Alle', 'Smart Home', 'Kitchen', 'News', 'Radar', 'Hohes Potenzial'];

const SIGNALS = [
  {
    id: 1,
    category: 'SMART HOME',
    categoryColor: '#00d4ff',
    title: 'Shelly Plug S Gen3 im Fokus',
    description: 'Die neue Gen3 Serie sorgt für hohe Nachfrage und starke Social Buzz. Perfekt für How-to-Inhalte & Affiliate-Deals.',
    score: 92,
    scoreTrend: 18,
    platform: 'Instagram',
    platformIcon: '📸',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=120&h=120&fit=crop',
    starred: false,
  },
  {
    id: 2,
    category: 'KITCHEN',
    categoryColor: '#a78bfa',
    title: 'Airfryer Trends 2025',
    description: 'Airfryer Rezepte und Vergleiche erzielen Rekord-Reichweiten. Guter Zeitpunkt für Tests, Rezepte & Kaufberatung.',
    score: 90,
    scoreTrend: 22,
    platform: 'YouTube Shorts',
    platformIcon: '▶',
    image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=120&h=120&fit=crop',
    starred: false,
  },
  {
    id: 3,
    category: 'NEWS',
    categoryColor: '#60a5fa',
    title: 'KI-News Update',
    description: 'OpenAI & Google I/O Highlights erzeugen hohe Engagement-Spitzen. Erkläre, ordne ein, profitiere.',
    score: 87,
    scoreTrend: 16,
    platform: 'LinkedIn',
    platformIcon: '💼',
    image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=120&h=120&fit=crop',
    starred: false,
  },
  {
    id: 4,
    category: 'RADAR',
    categoryColor: '#34d399',
    title: 'Balkonkraftwerk im Aufwind',
    description: 'Steigende Nachfrage nach einfachen PV-Lösungen. Ideal für Ratgeber, Vergleiche & Produkteinführungen.',
    score: 85,
    scoreTrend: 21,
    platform: 'Instagram',
    platformIcon: '📸',
    image: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?w=120&h=120&fit=crop',
    starred: false,
  },
  {
    id: 5,
    category: 'SMART HOME',
    categoryColor: '#00d4ff',
    title: 'Smart Metering erklärt',
    description: 'Smart Meter Rollout & Vorteile sind stark im Gespräch. Erkläre Nutzen, Kosten & Installation.',
    score: 82,
    scoreTrend: 14,
    platform: 'YouTube',
    platformIcon: '▶',
    image: 'https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=120&h=120&fit=crop',
    starred: false,
  },
  {
    id: 6,
    category: 'RADAR',
    categoryColor: '#34d399',
    title: 'Sommer-Energiesparen',
    description: 'Hohe Relevanz für Tipps zu Kühlen, Lüften & Strom sparen. Saisonales Thema mit starker Suchintention.',
    score: 78,
    scoreTrend: 12,
    platform: 'TikTok',
    platformIcon: '🎵',
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=120&h=120&fit=crop',
    starred: false,
  },
];

const TOP_CHANCES = [
  { rank: 1, title: 'Shelly Plug S Gen3 im Fokus', category: 'Smart Home', score: 92, trend: 18 },
  { rank: 2, title: 'Airfryer Trends 2025', category: 'Kitchen', score: 90, trend: 22 },
  { rank: 3, title: 'KI-News Update', category: 'News', score: 87, trend: 16 },
  { rank: 4, title: 'Balkonkraftwerk im Aufwind', category: 'Radar', score: 85, trend: 21 },
  { rank: 5, title: 'Smart Metering erklärt', category: 'Smart Home', score: 82, trend: 14 },
];

export default function Signals() {
  const [, navigate] = useLocation();
  const [activeFilter, setActiveFilter] = useState('Alle');
  const [signals, setSignals] = useState(SIGNALS);
  const [page, setPage] = useState(1);

  const toggleStar = (id: number) => {
    setSignals(prev => prev.map(s => s.id === id ? { ...s, starred: !s.starred } : s));
  };

  const filtered = activeFilter === 'Alle' 
    ? signals 
    : signals.filter(s => s.category.toLowerCase().includes(activeFilter.toLowerCase()));

  return (
    <div className="p-5 animate-fade-in-up">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
            Signale
          </h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
            Entdecke hochpotenzielle Themen und Chancen aus allen ATLAS-Systemen.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>
            Zuletzt aktualisiert {new Date().toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' })}, {new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
          </span>
          <button className="atlas-btn-ghost p-1.5">
            <RefreshCw size={13} />
          </button>
        </div>
      </div>

      {/* Filter Tabs */}
      <div className="flex items-center gap-1.5 mb-4 flex-wrap">
        {FILTER_TABS.map(tab => (
          <button
            key={tab}
            onClick={() => setActiveFilter(tab)}
            className="px-3 py-1.5 rounded text-xs font-medium transition-all"
            style={{
              background: activeFilter === tab ? 'oklch(0.82 0.18 210 / 0.12)' : 'var(--atlas-surface)',
              color: activeFilter === tab ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
              border: `1px solid ${activeFilter === tab ? 'oklch(0.82 0.18 210 / 0.3)' : 'var(--atlas-border)'}`,
              fontFamily: 'var(--font-body)',
            }}
          >
            {tab}
          </button>
        ))}
        <div className="ml-auto">
          <select
            className="text-xs px-2 py-1.5 rounded"
            style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}
          >
            <option>Diese Woche</option>
            <option>Dieser Monat</option>
          </select>
        </div>
      </div>

      <div className="flex gap-4">
        {/* Signal Cards Grid */}
        <div className="flex-1 min-w-0">
          <div className="grid grid-cols-2 gap-3">
            {filtered.map((signal, i) => (
              <div
                key={signal.id}
                className="atlas-card atlas-card-hover p-4 cursor-pointer"
                style={{ animationDelay: `${i * 50}ms` }}
              >
                {/* Category + Star */}
                <div className="flex items-center justify-between mb-3">
                  <span
                    className="text-xs font-bold"
                    style={{ color: signal.categoryColor, fontFamily: 'var(--font-mono)', fontSize: '0.6rem', letterSpacing: '0.08em' }}
                  >
                    {signal.category}
                  </span>
                  <button onClick={() => toggleStar(signal.id)}>
                    <Star
                      size={14}
                      style={{ color: signal.starred ? '#f59e0b' : 'var(--muted-foreground)', fill: signal.starred ? '#f59e0b' : 'none' }}
                    />
                  </button>
                </div>

                {/* Content */}
                <div className="flex gap-3 mb-3">
                  <img
                    src={signal.image}
                    alt={signal.title}
                    className="rounded flex-shrink-0"
                    style={{ width: '56px', height: '56px', objectFit: 'cover' }}
                    onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
                  />
                  <div className="flex-1 min-w-0">
                    <div className="font-semibold text-sm mb-1" style={{ color: 'var(--foreground)', fontFamily: 'var(--font-display)' }}>
                      {signal.title}
                    </div>
                    <div className="text-xs leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>
                      {signal.description}
                    </div>
                  </div>
                  {/* Score */}
                  <div className="flex flex-col items-end flex-shrink-0">
                    <div className="text-2xl font-bold" style={{ fontFamily: 'var(--font-mono)', color: 'var(--atlas-cyan)' }}>
                      {signal.score}
                    </div>
                    <div className="flex items-center gap-0.5">
                      <TrendingUp size={10} style={{ color: 'var(--atlas-green)' }} />
                      <span className="text-xs" style={{ color: 'var(--atlas-green)', fontFamily: 'var(--font-mono)' }}>
                        +{signal.scoreTrend}%
                      </span>
                    </div>
                    <div className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Trend</div>
                  </div>
                </div>

                {/* Platform */}
                <div className="mb-3">
                  <div className="text-xs mb-1" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Empfohlene Plattform</div>
                  <div className="flex items-center gap-1">
                    <span style={{ fontSize: '12px' }}>{signal.platformIcon}</span>
                    <span className="text-xs" style={{ color: 'var(--foreground)' }}>{signal.platform}</span>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex gap-2">
                  <button
                    onClick={() => navigate('/drafts')}
                    className="flex-1 text-xs py-1.5 rounded font-medium transition-all"
                    style={{
                      background: 'var(--atlas-navy)',
                      border: '1px solid var(--atlas-border)',
                      color: 'var(--foreground)',
                      fontFamily: 'var(--font-body)',
                    }}
                  >
                    Als Draft erstellen
                  </button>
                  <button
                    onClick={() => navigate('/campaigns')}
                    className="flex-1 text-xs py-1.5 rounded font-medium transition-all"
                    style={{
                      background: 'oklch(0.82 0.18 210 / 0.12)',
                      border: '1px solid oklch(0.82 0.18 210 / 0.3)',
                      color: 'var(--atlas-cyan)',
                      fontFamily: 'var(--font-body)',
                    }}
                  >
                    Zur Kampagne
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
              1–6 von 42 Signalen
            </span>
            <div className="flex items-center gap-1">
              <button className="atlas-btn-ghost p-1.5" onClick={() => setPage(p => Math.max(1, p - 1))}>
                <ChevronLeft size={14} />
              </button>
              {[1, 2, 3, 4, 5].map(p => (
                <button
                  key={p}
                  onClick={() => setPage(p)}
                  className="w-7 h-7 text-xs rounded transition-all"
                  style={{
                    background: page === p ? 'oklch(0.82 0.18 210 / 0.12)' : 'transparent',
                    color: page === p ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
                    border: `1px solid ${page === p ? 'oklch(0.82 0.18 210 / 0.3)' : 'transparent'}`,
                  }}
                >
                  {p}
                </button>
              ))}
              <button className="atlas-btn-ghost p-1.5" onClick={() => setPage(p => p + 1)}>
                <ChevronRight size={14} />
              </button>
            </div>
            <select
              className="text-xs px-2 py-1 rounded"
              style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}
            >
              <option>6 pro Seite</option>
              <option>12 pro Seite</option>
            </select>
          </div>
        </div>

        {/* Right Sidebar */}
        <div className="w-56 flex-shrink-0 space-y-3">
          {/* Top Chancen */}
          <div className="atlas-card p-3">
            <div className="flex items-center gap-1.5 mb-3">
              <span style={{ fontSize: '14px' }}>🏆</span>
              <span className="text-xs font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
                Top Chancen heute
              </span>
            </div>
            <div className="space-y-2">
              {TOP_CHANCES.map(c => (
                <div key={c.rank} className="flex items-center gap-2">
                  <div
                    className="flex items-center justify-center rounded-full text-xs font-bold flex-shrink-0"
                    style={{
                      width: '20px', height: '20px',
                      background: c.rank === 1 ? '#f59e0b20' : c.rank === 2 ? '#94a3b820' : '#64748b20',
                      color: c.rank === 1 ? '#f59e0b' : c.rank === 2 ? '#94a3b8' : '#64748b',
                      fontFamily: 'var(--font-mono)', fontSize: '0.6rem',
                    }}
                  >
                    {c.rank}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs truncate" style={{ color: 'var(--foreground)' }}>{c.title}</div>
                    <div className="text-xs" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>{c.category}</div>
                  </div>
                  <div className="text-right flex-shrink-0">
                    <div className="text-xs font-bold" style={{ fontFamily: 'var(--font-mono)', color: 'var(--atlas-cyan)' }}>{c.score}</div>
                    <div className="text-xs" style={{ color: 'var(--atlas-green)', fontSize: '0.6rem' }}>↑{c.trend}%</div>
                  </div>
                </div>
              ))}
            </div>
            <button className="w-full text-xs mt-3 py-1.5 rounded" style={{ color: 'var(--atlas-cyan)', border: '1px solid oklch(0.82 0.18 210 / 0.2)', background: 'transparent' }}>
              Alle Signale anzeigen
            </button>
          </div>

          {/* System Insights */}
          <div className="atlas-card p-3">
            <div className="text-xs font-semibold mb-2" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
              System-Insights
            </div>
            <div className="space-y-2">
              <div className="flex gap-2">
                <div className="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style={{ background: 'var(--atlas-cyan)' }} />
                <p className="text-xs" style={{ color: 'var(--muted-foreground)', lineHeight: '1.5' }}>
                  KI-News Update zeigt aktuell die höchste Engagement-Dynamik aller News-Signale.
                </p>
              </div>
              <div className="flex gap-2">
                <div className="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0" style={{ background: 'var(--atlas-green)' }} />
                <p className="text-xs" style={{ color: 'var(--muted-foreground)', lineHeight: '1.5' }}>
                  Smart Home Signale performen 14% über Durchschnitt.
                </p>
              </div>
            </div>
            <button className="text-xs mt-2" style={{ color: 'var(--atlas-cyan)' }}>
              Zum Radar wechseln →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
