'use client';

import { useDSGVO } from '@breakpilot/compliance-sdk-react';
import Link from 'next/link';
import {
  Shield,
  Users,
  FileCheck,
  FileText,
  Lock,
  Trash2,
  ClipboardCheck,
  AlertCircle,
  ArrowRight,
  ArrowLeft,
} from 'lucide-react';

export default function DSGVOPage() {
  const { consents, dsrRequests, vvtActivities, toms, isLoading } = useDSGVO();

  const modules = [
    {
      id: 'consent',
      title: 'Einwilligungen',
      description: 'Consent-Tracking Multi-Channel',
      icon: ClipboardCheck,
      href: '/dsgvo/consent',
      articles: 'Art. 6, 7',
      count: consents?.length ?? 0,
      color: 'bg-blue-500',
    },
    {
      id: 'dsr',
      title: 'Betroffenenrechte (DSR)',
      description: 'Auskunft, Loeschung, Berichtigung',
      icon: Users,
      href: '/dsgvo/dsr',
      articles: 'Art. 15-21',
      count: dsrRequests?.length ?? 0,
      color: 'bg-green-500',
    },
    {
      id: 'vvt',
      title: 'Verarbeitungsverzeichnis',
      description: 'Dokumentation aller Verarbeitungstaetigkeiten',
      icon: FileText,
      href: '/dsgvo/vvt',
      articles: 'Art. 30',
      count: vvtActivities?.length ?? 0,
      color: 'bg-purple-500',
    },
    {
      id: 'dsfa',
      title: 'Datenschutz-Folgenabschaetzung',
      description: 'Risk Assessment fuer Verarbeitungen',
      icon: AlertCircle,
      href: '/dsgvo/dsfa',
      articles: 'Art. 35, 36',
      count: 0,
      color: 'bg-yellow-500',
    },
    {
      id: 'tom',
      title: 'TOM',
      description: 'Technische & Organisatorische Massnahmen',
      icon: Lock,
      href: '/dsgvo/tom',
      articles: 'Art. 32',
      count: toms?.length ?? 0,
      color: 'bg-red-500',
    },
    {
      id: 'retention',
      title: 'Loeschfristen',
      description: 'Retention Policies & Automations',
      icon: Trash2,
      href: '/dsgvo/retention',
      articles: 'Art. 5, 17',
      count: 0,
      color: 'bg-orange-500',
    },
  ];

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center gap-4">
            <Link
              href="/"
              className="p-2 hover:bg-muted rounded-lg transition-colors"
            >
              <ArrowLeft className="h-5 w-5" />
            </Link>
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-blue-500/10">
                <Shield className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <h1 className="text-xl font-semibold">DSGVO Modul</h1>
                <p className="text-sm text-muted-foreground">
                  Datenschutz-Grundverordnung Compliance
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        {/* Progress Overview */}
        <div className="bg-card border rounded-xl p-6 mb-8">
          <h2 className="text-lg font-medium mb-4">DSGVO Compliance Status</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="text-center">
              <div className="text-3xl font-bold text-blue-500">
                {consents?.length ?? 0}
              </div>
              <div className="text-sm text-muted-foreground">
                Active Consents
              </div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-green-500">
                {dsrRequests?.filter((r) => r.status === 'PENDING').length ?? 0}
              </div>
              <div className="text-sm text-muted-foreground">Pending DSRs</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-purple-500">
                {vvtActivities?.length ?? 0}
              </div>
              <div className="text-sm text-muted-foreground">
                Processing Activities
              </div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-red-500">
                {toms?.filter((t) => t.implementationStatus === 'IMPLEMENTED').length ??
                  0}
              </div>
              <div className="text-sm text-muted-foreground">
                Implemented TOMs
              </div>
            </div>
          </div>
        </div>

        {/* Module Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {modules.map((module) => {
            const Icon = module.icon;
            return (
              <Link
                key={module.id}
                href={module.href}
                className="group bg-card border rounded-xl p-6 hover:shadow-lg transition-all duration-200 hover:border-primary/50"
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`p-3 rounded-lg ${module.color}/10`}>
                    <Icon className={`h-6 w-6 ${module.color.replace('bg-', 'text-')}`} />
                  </div>
                  <span className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded">
                    {module.articles}
                  </span>
                </div>
                <h3 className="text-lg font-semibold mb-1">{module.title}</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  {module.description}
                </p>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">
                    <span className="font-medium text-foreground">
                      {module.count}
                    </span>{' '}
                    Eintraege
                  </span>
                  <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                </div>
              </Link>
            );
          })}
        </div>
      </main>
    </div>
  );
}