'use client'

/**
 * ResultsTabsView — strukturierte Tab-Ansicht der Audit-Ergebnisse.
 *
 * Statt einer langen Scroll-Seite gibt es:
 *   1. Übersicht (Score + GF-Kurzfassung)
 *   2. Cookies (3-Quellen-Compliance-Vergleich + Vendor-/Cookie-Listen)
 *   3. Datenschutzerklärung
 *   4. Impressum
 *   5. AGB / Widerruf
 *   6. Banner (Cookie-Banner-Checks)
 *   7. Vollständige Mail (HTML-Preview)
 *
 * Tab-Headers sticky oben, Content scrollbar unten.
 */

import React, { useState, useMemo } from 'react'
import { ChecklistView } from './ChecklistView'

interface ResultsTabsViewProps {
  results: any
}

type TabId = 'overview' | 'cookies' | 'dse' | 'impressum' | 'agb' | 'banner' | 'mail'

const TABS: { id: TabId; label: string; icon: string }[] = [
  { id: 'overview',  label: 'Übersicht',          icon: '◉' },
  { id: 'cookies',   label: 'Cookies & VVT',      icon: '🍪' },
  { id: 'dse',       label: 'Datenschutzerkl.',   icon: '📄' },
  { id: 'impressum', label: 'Impressum',          icon: '🏢' },
  { id: 'agb',       label: 'AGB / Widerruf',     icon: '⚖️' },
  { id: 'banner',    label: 'Cookie-Banner',      icon: '🎛' },
  { id: 'mail',      label: 'Mail-Vorschau',      icon: '✉️' },
]

export function ResultsTabsView({ results }: ResultsTabsViewProps) {
  const [active, setActive] = useState<TabId>('overview')

  const r = results || {}
  const docs: any[] = r.results || []
  const banner = r.banner_result || r.cookie_banner_result || {}
  const cmpVendors: any[] = r.cmp_vendors || []
  const cookieAudit = r.cookie_audit || {}

  const docsByType = useMemo(() => {
    const m: Record<string, any> = {}
    for (const d of docs) {
      const t = (d.doc_type || '').toLowerCase()
      if (!m[t]) m[t] = d
    }
    return m
  }, [docs])

  return (
    <div className="border border-gray-200 rounded-lg overflow-hidden bg-white">
      {/* Sticky Tab-Header */}
      <div className="flex border-b border-gray-200 bg-gray-50 overflow-x-auto sticky top-0 z-10">
        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setActive(t.id)}
            className={`px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
              active === t.id
                ? 'border-purple-600 text-purple-700 bg-white'
                : 'border-transparent text-gray-600 hover:bg-gray-100'
            }`}
          >
            <span className="mr-1.5">{t.icon}</span>
            {t.label}
          </button>
        ))}
      </div>

      {/* Tab-Content */}
      <div className="p-4 min-h-[400px]">
        {active === 'overview' && <OverviewTab results={r} />}
        {active === 'cookies' && (
          <CookiesTab
            audit={cookieAudit}
            vendors={cmpVendors}
            banner={banner}
          />
        )}
        {active === 'dse'       && <DocTab doc={docsByType['dse']} label="Datenschutzerklärung" />}
        {active === 'impressum' && <DocTab doc={docsByType['impressum']} label="Impressum" />}
        {active === 'agb'       && <AgbWiderrufTab docs={docsByType} />}
        {active === 'banner'    && <BannerTab banner={banner} />}
        {active === 'mail'      && <MailPreviewTab results={r} />}
      </div>
    </div>
  )
}

// ── Übersicht ──────────────────────────────────────────────────────────
function OverviewTab({ results }: { results: any }) {
  const totalDocs = results.total_documents || (results.results?.length ?? 0)
  const totalFindings = results.total_findings ?? 0
  const banner = results.banner_result || results.cookie_banner_result || {}
  const score = banner.compliance_score ?? banner.completeness_pct ?? null
  const emailStatus = results.email_status

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <Kpi label="Geprüfte Dokumente" value={totalDocs} />
        <Kpi label="Findings gesamt" value={totalFindings} tone={totalFindings > 5 ? 'warn' : 'ok'} />
        <Kpi label="Vendors erkannt" value={results.cmp_vendors?.length || 0} />
        <Kpi label="Score" value={score !== null ? `${score}%` : '—'}
             tone={score === null ? 'neutral' : score >= 80 ? 'ok' : score >= 60 ? 'warn' : 'bad'} />
      </div>

      {emailStatus && (
        <div className={`text-sm px-3 py-2 rounded ${
          emailStatus === 'sent' ? 'bg-green-50 text-green-800' : 'bg-gray-100 text-gray-700'
        }`}>
          E-Mail: {emailStatus === 'sent' ? '✓ Gesendet an Empfänger' : emailStatus}
        </div>
      )}

      <div className="bg-blue-50 border border-blue-200 rounded p-3 text-xs text-blue-900">
        <strong>Wo welcher Inhalt steckt:</strong> in den Tabs oben findest du die
        Detail-Auswertung pro Doc-Typ. Im Cookie-Tab steht der 3-Quellen-Compliance-
        Vergleich (deklariert vs Browser vs Library) — das ist der wichtigste
        rechtliche Knackpunkt. Banner-Tab zeigt die echten Browser-Phasen-Checks.
      </div>
    </div>
  )
}

function Kpi({ label, value, tone = 'neutral' }: { label: string; value: any; tone?: string }) {
  const colors: Record<string, string> = {
    ok: 'text-green-700 bg-green-50 border-green-200',
    warn: 'text-amber-700 bg-amber-50 border-amber-200',
    bad: 'text-red-700 bg-red-50 border-red-200',
    neutral: 'text-gray-700 bg-gray-50 border-gray-200',
  }
  return (
    <div className={`border rounded p-3 ${colors[tone]}`}>
      <div className="text-[10px] uppercase tracking-wider opacity-70">{label}</div>
      <div className="text-2xl font-bold mt-1">{value}</div>
    </div>
  )
}

// ── Cookies & VVT ──────────────────────────────────────────────────────
function CookiesTab({ audit, vendors, banner }: { audit: any; vendors: any[]; banner: any }) {
  const declared = audit?.declared_count ?? 0
  const browser  = audit?.browser_count ?? 0
  const both     = (audit?.compliant ?? []).length
  const undecl   = (audit?.undeclared_in_browser ?? []).length
  const decOnly  = (audit?.declared_not_loaded ?? []).length

  return (
    <div className="space-y-4">
      {/* Top-Bar mit Counts */}
      <div className="grid grid-cols-3 md:grid-cols-5 gap-2">
        <Kpi label="Deklariert" value={declared} />
        <Kpi label="Im Browser" value={browser} />
        <Kpi label="Compliant" value={both} tone="ok" />
        <Kpi label="Undokumentiert" value={undecl} tone={undecl > 0 ? 'bad' : 'ok'} />
        <Kpi label="Nicht geladen" value={decOnly} tone={decOnly > 0 ? 'warn' : 'neutral'} />
      </div>

      {/* 3-Spalten-Vergleichstabelle */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <CookieColumn
          title={`❌ Undokumentiert (${undecl})`}
          tone="bad"
          subtitle="Geladen ABER nicht in der Richtlinie — Art. 13(1)(c) DSGVO Verstoß"
          cookies={audit?.undeclared_in_browser ?? []}
        />
        <CookieColumn
          title={`✓ Compliant (${both})`}
          tone="ok"
          subtitle="Beide Quellen stimmen überein"
          cookies={audit?.compliant ?? []}
        />
        <CookieColumn
          title={`⚠️ Nicht geladen (${decOnly})`}
          tone="warn"
          subtitle="In Richtlinie deklariert, aber bei diesem Lauf nicht im Browser"
          cookies={audit?.declared_not_loaded ?? []}
        />
      </div>

      {/* Vendor-Liste (deduped) */}
      <div>
        <h3 className="text-sm font-semibold mb-2 text-gray-800">
          Vendor-Liste ({vendors.length} unique nach Deduplizierung)
        </h3>
        <div className="overflow-x-auto border border-gray-200 rounded">
          <table className="w-full text-xs">
            <thead className="bg-gray-50">
              <tr>
                <th className="text-left px-3 py-2">Vendor</th>
                <th className="text-left px-3 py-2">Kategorie</th>
                <th className="text-left px-3 py-2">Quelle</th>
                <th className="text-right px-3 py-2">Cookies</th>
              </tr>
            </thead>
            <tbody>
              {vendors.map((v, i) => (
                <tr key={i} className="border-t border-gray-100 hover:bg-gray-50">
                  <td className="px-3 py-2 font-medium">{v.name}</td>
                  <td className="px-3 py-2 text-gray-600">{v.category || '—'}</td>
                  <td className="px-3 py-2 text-gray-500 font-mono text-[10px]">
                    {v.source || '—'}
                  </td>
                  <td className="px-3 py-2 text-right">{(v.cookies || []).length}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

function CookieColumn({ title, tone, subtitle, cookies }: {
  title: string; tone: string; subtitle: string; cookies: string[]
}) {
  const colors: Record<string, string> = {
    bad: 'bg-red-50 border-red-200 text-red-900',
    ok: 'bg-green-50 border-green-200 text-green-900',
    warn: 'bg-amber-50 border-amber-200 text-amber-900',
  }
  return (
    <div className={`border rounded p-3 ${colors[tone]}`}>
      <div className="text-xs font-semibold mb-1">{title}</div>
      <div className="text-[10px] opacity-80 mb-2">{subtitle}</div>
      <div className="font-mono text-[10px] max-h-56 overflow-auto">
        {cookies.length === 0 && <span className="opacity-60">— keine —</span>}
        {cookies.map((c, i) => (
          <div key={i} className="py-0.5">{c}</div>
        ))}
      </div>
    </div>
  )
}

// ── Generic Doc-Tab ────────────────────────────────────────────────────
function DocTab({ doc, label }: { doc: any; label: string }) {
  if (!doc) return <Empty label={label} />
  const checks = doc.checks || []
  const failed = checks.filter((c: any) => !c.passed && !c.skipped)
  const passed = checks.filter((c: any) => c.passed)

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold">{label}</h3>
        <div className="text-xs text-gray-600">
          {doc.word_count?.toLocaleString('de-DE') || 0} Wörter ·{' '}
          <span className="text-red-600">{failed.length} Findings</span> ·{' '}
          <span className="text-green-600">{passed.length} OK</span>
        </div>
      </div>
      {doc.url && (
        <a href={doc.url} target="_blank" rel="noreferrer"
           className="text-xs text-blue-600 hover:underline break-all">
          {doc.url}
        </a>
      )}
      <ChecklistView results={[doc]} />
    </div>
  )
}

function AgbWiderrufTab({ docs }: { docs: Record<string, any> }) {
  const agb = docs['agb'] || docs['nutzungsbedingungen']
  const wid = docs['widerruf']
  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-sm font-semibold mb-2">AGB / Nutzungsbedingungen</h3>
        {agb ? <ChecklistView results={[agb]} /> : <Empty label="AGB" inline />}
      </div>
      <div>
        <h3 className="text-sm font-semibold mb-2">Widerrufsbelehrung</h3>
        {wid ? <ChecklistView results={[wid]} /> : <Empty label="Widerruf" inline />}
      </div>
    </div>
  )
}

function BannerTab({ banner }: { banner: any }) {
  if (!banner || Object.keys(banner).length === 0) return <Empty label="Cookie-Banner" />
  const phases = banner.phases || {}
  const violations = banner.banner_checks?.violations || []
  return (
    <div className="space-y-3">
      <div className="text-xs text-gray-700">
        Banner erkannt: <strong>{banner.banner_detected ? 'Ja' : 'Nein'}</strong> ·{' '}
        Provider: <strong>{banner.banner_provider || '—'}</strong> ·{' '}
        Verstöße: <strong>{violations.length}</strong>
      </div>
      {violations.length > 0 && (
        <div className="border border-red-200 bg-red-50 rounded p-3">
          <div className="text-xs font-semibold text-red-800 mb-2">Verstöße</div>
          <ul className="text-xs text-red-900 space-y-1">
            {violations.map((v: any, i: number) => (
              <li key={i}>• {v.label || v.message || JSON.stringify(v)}</li>
            ))}
          </ul>
        </div>
      )}
      <div className="grid grid-cols-3 gap-2">
        {Object.entries(phases).map(([name, ph]: [string, any]) => (
          <div key={name} className="border border-gray-200 rounded p-2">
            <div className="text-[10px] uppercase text-gray-500">{name}</div>
            <div className="text-xs mt-1">
              Cookies: <strong>{ph.cookies?.length || 0}</strong>
            </div>
            <div className="text-xs">
              Vendors: <strong>{ph.vendors?.length || 0}</strong>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function MailPreviewTab({ results }: { results: any }) {
  return (
    <div className="text-xs text-gray-600 space-y-2">
      <p>
        Die vollständige Mail wurde {results.email_status === 'sent' ? 'gesendet' : 'erstellt'}.
        Snapshot-ID:{' '}
        <code className="bg-gray-100 px-1.5 py-0.5 rounded">{results.check_id || '—'}</code>
      </p>
      {results.check_id && (
        <a
          href={`/api/compliance/agent/snapshots/${results.check_id}/pdf`}
          target="_blank" rel="noreferrer"
          className="inline-block text-purple-600 hover:underline"
        >
          → PDF der Mail herunterladen
        </a>
      )}
    </div>
  )
}

function Empty({ label, inline }: { label: string; inline?: boolean }) {
  return (
    <div className={`text-xs text-gray-500 ${inline ? '' : 'py-8 text-center'}`}>
      Keine Daten für „{label}" in diesem Lauf.
    </div>
  )
}