/**
 * Kampagnen — Plane, bündele und steuere kanalübergreifende Content-Offensiven
 * Referenz: docs/design-references/screen-kampagnen.png
 */

import { useState } from 'react';
import { ChevronLeft, ChevronRight, Plus, TrendingUp } from 'lucide-react';

const CAMPAIGNS = [
  {
    id: '1', title: 'Shelly Sommer-Smart-Home', status: 'Im Gange', statusColor: '#10b981',
    description: 'Mehr Komfort. Weniger Kosten. Smarter Sommer mit Shelly.',
    dateRange: '20. Mai – 15. Juni 2025', channels: ['TikTok', 'Instagram', 'LinkedIn', 'YouTube'],
    budget: '€12.000', reach: '1,2 Mio.', affiliatePotential: '€14.320', affiliateTrend: '+22%',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&h=160&fit=crop',
    score: 92,
  },
  {
    id: '2', title: 'Kitchen Trend Woche', status: 'Geplant', statusColor: '#f59e0b', priority: 'Top Priorität',
    description: 'Airfryer, Zubehör & smarte Küchenhelfer – eine Trend-Highlights.',
    dateRange: '2. Juni – 8. Juni 2025', channels: ['Instagram', 'TikTok', 'YouTube', 'LinkedIn'],
    budget: '€8.000', reach: '850 Tsd.', affiliatePotential: '€9.810', affiliateTrend: '+15%',
    image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=300&h=160&fit=crop',
    score: 88,
  },
  {
    id: '3', title: 'KI-News Sprint', status: 'Im Gange', statusColor: '#10b981',
    description: 'Die wichtigsten KI-Updates kompakt erklärt – jeden Tag, jede Woche.',
    dateRange: '26. Mai – 9. Juni 2025', channels: ['LinkedIn', 'X', 'TikTok', 'Instagram'],
    budget: '€4.500', reach: '620 Tsd.', affiliatePotential: '€3.890', affiliateTrend: '+15%',
    image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=300&h=160&fit=crop',
    score: 84,
  },
  {
    id: '4', title: 'Energie sparen im Juni', status: 'Geplant', statusColor: '#f59e0b',
    description: 'Clever sparen, nachhaltig leben – mit Shelly und smarter Technik.',
    dateRange: '3. Juni – 30. Juni 2025', channels: ['TikTok', 'Instagram', 'Facebook', 'YouTube'],
    budget: '€6.000', reach: '900 Tsd.', affiliatePotential: '€6.730', affiliateTrend: '+12%',
    image: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?w=300&h=160&fit=crop',
    score: 81,
  },
];

const TIMELINE_STAGES = ['Briefing', 'Drafts', 'Review', 'Live', 'Optimierung'];
const STAGE_COLORS: Record<string, string> = {
  Briefing: '#60a5fa', Drafts: '#a78bfa', Review: '#f59e0b', Live: '#10b981', Optimierung: '#00d4ff',
};

const TIMELINE_DATA: Record<string, Record<string, string>> = {
  'Shelly Sommer-Smart-Home': { 'Mo 26. Mai': 'Briefing', 'Di 27. Mai': 'Drafts', 'Mi 28. Mai': 'Review', 'Do 29. Mai': 'Live', 'Fr 30. Mai': 'Optimierung' },
  'Kitchen Trend Woche': { 'Di 27. Mai': 'Briefing', 'Mi 28. Mai': 'Drafts', 'Do 29. Mai': 'Review', 'Fr 30. Mai': 'Live', 'Sa 31. Mai': 'Optimierung' },
  'KI-News Sprint': { 'Mo 26. Mai': 'Briefing', 'Di 27. Mai': 'Drafts', 'Mi 28. Mai': 'Live', 'Do 29. Mai': 'Optimierung' },
  'Energie sparen im Juni': { 'Di 27. Mai': 'Briefing', 'Do 29. Mai': 'Drafts', 'Fr 30. Mai': 'Review', 'Sa 31. Mai': 'Live', 'So 1. Jun': 'Optimierung' },
};

const DAYS = ['Mo 26. Mai', 'Di 27. Mai', 'Mi 28. Mai', 'Do 29. Mai', 'Fr 30. Mai', 'Sa 31. Mai', 'So 1. Jun'];

const PLATFORM_ICONS: Record<string, string> = { TikTok: '🎵', Instagram: '📸', LinkedIn: '💼', X: '✗', YouTube: '▶', Facebook: '👥' };

export default function Campaigns() {
  const [view, setView] = useState<'grid' | 'list'>('grid');

  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)' }}>Kampagnen</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Plane, bündele und steuere kanalübergreifende Content-Offensiven.</p>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun 2025</span>
          </div>
          <button className="atlas-btn-ghost p-1.5"><ChevronLeft size={14} /></button>
          <button className="atlas-btn-ghost p-1.5"><ChevronRight size={14} /></button>
          <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>
          </select>
          <button className="atlas-btn-primary text-xs gap-1.5"><Plus size={13} /> Neue Kampagne</button>
        </div>
      </div>

      {/* KPI Bar */}
      <div className="grid grid-cols-4 gap-3">
        {[
          { label: 'Aktive Kampagnen', value: '12', trend: '↑ 20% vs. letzte Woche', color: '#60a5fa' },
          { label: 'Geplante Assets', value: '86', trend: '↑ 16% vs. letzte Woche', color: '#a78bfa' },
          { label: 'Ø Conversion', value: '3,42 %', trend: '↑ 0,48 p.p. vs. letzte Woche', color: '#10b981' },
          { label: 'Proj. Affiliate-Umsatz', value: '€28.750', trend: '↑ 18% vs. letzte Woche', color: '#00d4ff' },
        ].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.trend}</div>
          </div>
        ))}
      </div>

      <div className="flex gap-4">
        {/* Campaign Cards */}
        <div className="flex-1 min-w-0 space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Kampagnen-Übersicht</h2>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {CAMPAIGNS.map(c => (
              <div key={c.id} className="atlas-card atlas-card-hover overflow-hidden cursor-pointer">
                <div className="relative" style={{ height: '100px' }}>
                  <img src={c.image} alt={c.title} style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.6 }} />
                  <div className="absolute inset-0" style={{ background: 'linear-gradient(to top, rgba(15,22,41,0.9) 0%, transparent 60%)' }} />
                  <div className="absolute top-2 left-2 flex items-center gap-1.5">
                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ background: `${c.statusColor}25`, color: c.statusColor, border: `1px solid ${c.statusColor}40`, fontSize: '0.6rem' }}>
                      {c.status}
                    </span>
                    {c.priority && <span className="text-xs px-1.5 py-0.5 rounded" style={{ background: '#f59e0b25', color: '#f59e0b', border: '1px solid #f59e0b40', fontSize: '0.6rem' }}>⭐ {c.priority}</span>}
                  </div>
                </div>
                <div className="p-3">
                  <div className="text-sm font-semibold mb-1" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>{c.title}</div>
                  <div className="text-xs mb-2" style={{ color: 'var(--muted-foreground)', lineHeight: '1.5' }}>{c.description}</div>
                  <div className="text-xs mb-2" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', fontSize: '0.6rem' }}>📅 {c.dateRange}</div>
                  <div className="flex gap-1 mb-3">
                    {c.channels.slice(0, 4).map(ch => (
                      <span key={ch} style={{ fontSize: '14px' }}>{PLATFORM_ICONS[ch] || '📱'}</span>
                    ))}
                    {c.channels.length > 4 && <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>+{c.channels.length - 4}</span>}
                  </div>
                  <div className="grid grid-cols-2 gap-2 mb-3">
                    <div>
                      <div className="text-xs" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Budget / Reach (geschätzt)</div>
                      <div className="text-xs font-bold" style={{ fontFamily: 'var(--font-mono)', color: 'var(--foreground)' }}>{c.budget} / {c.reach}</div>
                    </div>
                    <div>
                      <div className="text-xs" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>Affiliate-Potenzial</div>
                      <div className="flex items-center gap-1">
                        <span className="text-xs font-bold" style={{ fontFamily: 'var(--font-mono)', color: 'var(--atlas-green)' }}>{c.affiliatePotential}</span>
                        <span className="text-xs" style={{ color: 'var(--atlas-green)', fontSize: '0.6rem' }}>{c.affiliateTrend} vs. Plan</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button className="flex-1 text-xs py-1.5 rounded" style={{ background: 'var(--atlas-cyan)', color: 'var(--atlas-navy)', fontFamily: 'var(--font-display)', fontWeight: 600 }}>Öffnen</button>
                    <button className="flex-1 text-xs py-1.5 rounded" style={{ background: 'var(--atlas-navy)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>Bearbeiten</button>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Timeline */}
          <div className="atlas-card overflow-hidden">
            <div className="p-3 flex items-center justify-between" style={{ borderBottom: '1px solid var(--atlas-border)' }}>
              <div className="flex items-center gap-2">
                <h2 className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Kampagnen-Timeline & Content-Wellen</h2>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '700px' }}>
                <thead>
                  <tr style={{ borderBottom: '1px solid var(--atlas-border)' }}>
                    <th style={{ width: '180px', padding: '8px 12px', textAlign: 'left' }}><span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>Kampagne</span></th>
                    {DAYS.map(d => <th key={d} style={{ padding: '8px 8px', textAlign: 'center' }}><span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', fontSize: '0.6rem' }}>{d}</span></th>)}
                  </tr>
                </thead>
                <tbody>
                  {CAMPAIGNS.map((c, ci) => (
                    <tr key={c.id} style={{ borderBottom: ci < CAMPAIGNS.length - 1 ? '1px solid var(--atlas-border)' : 'none' }}>
                      <td style={{ padding: '8px 12px' }}>
                        <div className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>{c.title}</div>
                        <span className="text-xs" style={{ color: c.statusColor, fontSize: '0.6rem' }}>{c.status}</span>
                      </td>
                      {DAYS.map(d => {
                        const stage = TIMELINE_DATA[c.title]?.[d];
                        return (
                          <td key={d} style={{ padding: '6px 4px', textAlign: 'center' }}>
                            {stage ? (
                              <span
                                className="text-xs px-2 py-0.5 rounded"
                                style={{ background: `${STAGE_COLORS[stage]}20`, color: STAGE_COLORS[stage], fontSize: '0.6rem', whiteSpace: 'nowrap' }}
                              >
                                {stage}
                              </span>
                            ) : (
                              <span style={{ color: 'var(--atlas-border)' }}>—</span>
                            )}
                          </td>
                        );
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {/* Legend */}
            <div className="flex items-center gap-4 px-3 py-2" style={{ borderTop: '1px solid var(--atlas-border)' }}>
              {TIMELINE_STAGES.map(s => (
                <div key={s} className="flex items-center gap-1">
                  <div className="w-2 h-2 rounded-full" style={{ background: STAGE_COLORS[s] }} />
                  <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontSize: '0.6rem' }}>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right Sidebar */}
        <div className="w-56 flex-shrink-0 space-y-3">
          <div className="atlas-card p-3">
            <div className="text-xs font-semibold mb-2" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Top Kampagnen heute</div>
            <div className="space-y-2">
              {CAMPAIGNS.map((c, i) => (
                <div key={c.id} className="flex items-center gap-2">
                  <span className="text-xs font-bold" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', width: '16px' }}>{i + 1}</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-xs truncate" style={{ color: 'var(--foreground)' }}>{c.title}</div>
                    <span className="text-xs" style={{ color: c.statusColor, fontSize: '0.6rem' }}>{c.status}</span>
                  </div>
                  <div className="text-right">
                    <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.affiliateTrend.replace('+', '')}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="atlas-card p-3">
            <div className="text-xs font-semibold mb-2" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Kampagnen-Insights</div>
            <div className="space-y-2">
              {[
                '2 Kampagnen laufen outperformend (+20%+ vs. Plan)',
                'Durchschnittliche Conversion steigt um 0,48 p.p.',
                'Affiliates generieren +18% mehr Umsatz vs. letzte Woche.',
              ].map((insight, i) => (
                <div key={i} 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' }}>{insight}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
