'use client'

import { useState } from 'react'
import { useFetch } from '@/hooks/use-fetch'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { ScrollArea } from '@/components/ui/scroll-area'
import { PageHeader } from '../primitives'
import { formatDateTime, formatRelative } from '@/lib/format'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
import {
  Database,
  Download,
  FileJson,
  FileSpreadsheet,
  ShieldCheck,
  Lock,
  Clock,
  CheckCircle2,
  AlertTriangle,
  Loader2,
} from 'lucide-react'

interface InventoryItem {
  category: string
  models: string[]
  count: number
  retentionYears: number | null
  legalBasis: string
}
interface ExportEntry {
  id: string
  action: string
  detail: { format: string; scope: string; checksum: string; sizeBytes: number; recordCount: number } | null
  actor: string | null
  createdAt: string
}
interface DataData {
  inventory: InventoryItem[]
  stats: { totalRecords: number; activeTokens: number; activeWebhooks: number; exportCount: number }
  exports: ExportEntry[]
}

export function DataView() {
  const { data, loading, refetch } = useFetch<DataData>('/api/aos/data-management')
  const [exporting, setExporting] = useState<'json-full' | 'csv-full' | null>(null)

  if (loading || !data) {
    return (
      <div className="space-y-6 p-4 md:p-6">
        <Skeleton className="h-9 w-48" />
        <Skeleton className="h-64" />
      </div>
    )
  }

  const { inventory, stats, exports } = data

  const doExport = async (format: 'json' | 'csv', scope: string) => {
    setExporting(format === 'json' ? 'json-full' : 'csv-full')
    const t = toast.loading('Export wird erstellt (SHA-256 Checksumme berechnet)…')
    try {
      const r = await fetch(`/api/aos/data-management/export?format=${format}&scope=${scope}`)
      if (!r.ok) throw new Error('export failed')
      const blob = await r.blob()
      const checksum = r.headers.get('x-aos-checksum') ?? 'n/a'
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `aos-export-${scope}-${new Date().toISOString().slice(0, 10)}.${format === 'json' ? 'json' : 'csv'}`
      a.click()
      URL.revokeObjectURL(url)
      toast.success(`Export erstellt — Checksumme: ${checksum.slice(0, 24)}…`, { id: t, duration: 6000 })
      refetch()
    } catch {
      toast.error('Export fehlgeschlagen', { id: t })
    } finally {
      setExporting(null)
    }
  }

  return (
    <div className="space-y-6 p-4 md:p-6">
      <PageHeader
        title="Datenverwaltung"
        description="DSGVO Art. 15 (Auskunft), Art. 20 (Datenübertragbarkeit), Art. 30 (Verarbeitungsverzeichnis). GoBD-konformer Voll Export mit SHA-256-Prüfsumme."
      />

      {/* KPIs */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        <Card className="p-4">
          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Datensätze gesamt</p><Database className="size-3.5 text-muted-foreground" /></div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.totalRecords}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Exporte (Historie)</p><Download className="size-3.5 text-muted-foreground" /></div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.exportCount}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Aktive API-Tokens</p><ShieldCheck className="size-3.5 text-muted-foreground" /></div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.activeTokens}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between"><p className="text-xs text-muted-foreground">Aktive Webhooks</p><ShieldCheck className="size-3.5 text-muted-foreground" /></div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.activeWebhooks}</p>
        </Card>
      </div>

      {/* Export actions */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-sm">
            <Download className="size-4 text-muted-foreground" />
            Daten-Export (DSGVO Art. 15 / Art. 20)
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <button
              onClick={() => doExport('json', 'all')}
              disabled={exporting !== null}
              className="flex items-center gap-3 rounded-md border border-border p-3 text-left transition hover:border-foreground/40"
            >
              <div className="flex size-10 items-center justify-center rounded-md bg-muted">
                {exporting === 'json-full' ? <Loader2 className="size-5 animate-spin" /> : <FileJson className="size-5 text-muted-foreground" />}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">Voll-Export (JSON)</p>
                <p className="text-[11px] text-muted-foreground">Alle Daten + Audit-Log. SHA-256 Checksumme. GoBD-Jahresarchiv.</p>
              </div>
            </button>
            <button
              onClick={() => doExport('csv', 'all')}
              disabled={exporting !== null}
              className="flex items-center gap-3 rounded-md border border-border p-3 text-left transition hover:border-foreground/40"
            >
              <div className="flex size-10 items-center justify-center rounded-md bg-muted">
                {exporting === 'csv-full' ? <Loader2 className="size-5 animate-spin" /> : <FileSpreadsheet className="size-5 text-muted-foreground" />}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">Firmen-Export (CSV)</p>
                <p className="text-[11px] text-muted-foreground">Kundenstammdaten als Tabelle. DATEV/Excel-kompatibel.</p>
              </div>
            </button>
          </div>
          <div className="rounded-md border border-dashed border-border p-3 text-[11px] text-muted-foreground">
            <p className="flex items-center gap-1.5 font-medium text-foreground"><ShieldCheck className="size-3.5" />DSGVO Art. 15 + Art. 20</p>
            <p className="mt-1">Betroffene haben das Recht auf Auskunft über ihre gespeicherten Daten (Art. 15) und deren Übertragbarkeit in einem strukturierten, gängigen Format (Art. 20). Jeder Export wird mit SHA-256-Prüfsumme signiert und im Audit-Log protokolliert.</p>
          </div>
        </CardContent>
      </Card>

      {/* Data inventory (Art. 30) */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-sm">
            <Database className="size-4 text-muted-foreground" />
            Verarbeitungsverzeichnis (Art. 30 DSGVO)
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
                <tr>
                  <th className="px-4 py-2 font-medium">Kategorie</th>
                  <th className="px-4 py-2 font-medium">Modelle</th>
                  <th className="px-4 py-2 font-medium text-right">Datensätze</th>
                  <th className="px-4 py-2 font-medium">Aufbewahrung</th>
                  <th className="px-4 py-2 font-medium">Rechtsgrundlage</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {inventory.map((item) => (
                  <tr key={item.category} className="transition hover:bg-muted/40">
                    <td className="px-4 py-2.5 text-xs font-medium">{item.category}</td>
                    <td className="px-4 py-2.5">
                      <div className="flex flex-wrap gap-1">
                        {item.models.map((m) => <Badge key={m} variant="outline" className="text-[9px] font-mono">{m}</Badge>)}
                      </div>
                    </td>
                    <td className="px-4 py-2.5 text-right text-xs font-semibold tabular-nums">{item.count}</td>
                    <td className="px-4 py-2.5 text-xs">
                      {item.retentionYears ? (
                        <span className="flex items-center gap-1"><Clock className="size-2.5 text-muted-foreground" />{item.retentionYears} Jahre</span>
                      ) : (
                        <span className="text-muted-foreground">bis Widerruf</span>
                      )}
                    </td>
                    <td className="px-4 py-2.5 text-[10px] text-muted-foreground">{item.legalBasis}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot className="border-t-2 border-border bg-muted/40">
                <tr>
                  <td className="px-4 py-2 text-xs font-semibold">Gesamt</td>
                  <td></td>
                  <td className="px-4 py-2 text-right text-sm font-bold tabular-nums">{stats.totalRecords}</td>
                  <td colSpan={2}></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </CardContent>
      </Card>

      {/* Export history */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Export-Historie ({exports.length})</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          {exports.length === 0 && <p className="py-4 text-center text-xs text-muted-foreground">Noch keine Exporte.</p>}
          {exports.map((exp) => (
            <div key={exp.id} className="flex items-center gap-3 rounded-md border border-border p-2.5">
              <CheckCircle2 className="size-4 shrink-0 text-muted-foreground" />
              <div className="min-w-0 flex-1">
                <p className="text-xs font-medium">{exp.action}</p>
                {exp.detail && (
                  <p className="text-[10px] text-muted-foreground">
                    Format: {exp.detail.format} · Scope: {exp.detail.scope} · {exp.detail.recordCount} Datensätze · {(exp.detail.sizeBytes / 1024).toFixed(1)} KB
                  </p>
                )}
                {exp.detail && (
                  <p className="text-[9px] font-mono text-muted-foreground">SHA-256: {exp.detail.checksum.slice(0, 32)}…</p>
                )}
              </div>
              <span className="shrink-0 text-[10px] text-muted-foreground">{formatRelative(exp.createdAt)}</span>
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Retention + Erasure notice */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-sm">
              <Clock className="size-4 text-muted-foreground" />
              Aufbewahrungsfristen
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-xs">
            <div className="flex items-center justify-between"><span>Rechnungen & Buchhaltungsdaten</span><Badge variant="outline" className="text-[10px]">8 Jahre (GoBD)</Badge></div>
            <div className="flex items-center justify-between"><span>Geschäftsbriefe & Verträge</span><Badge variant="outline" className="text-[10px]">6 Jahre (GoBD)</Badge></div>
            <div className="flex items-center justify-between"><span>Audit-Log (Hash-Kette)</span><Badge variant="outline" className="text-[10px]">8 Jahre (GoBD)</Badge></div>
            <div className="flex items-center justify-between"><span>Kundenstammdaten</span><Badge variant="outline" className="text-[10px]">6 Jahre</Badge></div>
            <div className="rounded-md border border-dashed border-border p-2 text-[10px] text-muted-foreground mt-2">
              <p>Automatische Lösch-Jobs (cron) nach Ablauf der Frist. GoBD: Daten sind unveränderlich, Korrekturen als Storno.</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-sm">
              <AlertTriangle className="size-4 text-muted-foreground" />
              Löschung (Art. 17 DSGVO)
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-xs text-muted-foreground">
            <p>Löschbegehren nach Art. 17 DSGVO (Recht auf Vergessenwerden) müssen geprüft werden:</p>
            <ul className="ml-4 space-y-1 list-disc">
              <li>GoBD-Aufbewahrungspflicht (8/6 Jahre) hat Vorrang</li>
              <li>Aktive Verträge/Rechnungen können nicht gelöscht werden</li>
              <li>Stattdessen: Pseudonymisierung (Name → „gelöscht")</li>
              <li>Vollständige Löschung erst nach Ablauf aller Fristen</li>
            </ul>
            <p className="mt-2 rounded-md border border-foreground/30 bg-foreground/5 p-2 text-[10px]">
              <Lock className="mr-1 inline size-3" />Lösch-Anfragen werden im Audit-Log protokolliert und erfordern Freigabe durch den Datenschutzbeauftragten.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}