'use client';

import { useCompliance } from '@breakpilot/compliance-sdk-react';
import Link from 'next/link';
import {
  Shield,
  FileText,
  Lock,
  Search,
  AlertTriangle,
  CheckCircle,
  ArrowRight,
  BarChart3,
  Settings,
} from 'lucide-react';

export default function DashboardPage() {
  const { state, isLoading, error, progress } = useCompliance();

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" />
          <p className="text-muted-foreground">Loading compliance data...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="text-center text-destructive">
          <AlertTriangle className="h-12 w-12 mx-auto mb-4" />
          <p>Error loading compliance data</p>
          <p className="text-sm text-muted-foreground mt-2">{error}</p>
        </div>
      </div>
    );
  }

  const modules = [
    {
      id: 'dsgvo',
      title: 'DSGVO',
      description: 'Datenschutz-Grundverordnung Compliance',
      icon: Shield,
      href: '/dsgvo',
      stats: { completed: 8, total: 12 },
      color: 'text-blue-500',
    },
    {
      id: 'compliance',
      title: 'Compliance Hub',
      description: 'Controls, Evidence & Obligations',
      icon: CheckCircle,
      href: '/compliance',
      stats: { completed: 32, total: 44 },
      color: 'text-green-500',
    },
    {
      id: 'rag',
      title: 'Legal Assistant',
      description: 'AI-powered regulatory search',
      icon: Search,
      href: '/rag',
      stats: { documents: 21 },
      color: 'text-purple-500',
    },
    {
      id: 'sbom',
      title: 'SBOM',
      description: 'Software Bill of Materials',
      icon: FileText,
      href: '/sbom',
      stats: { components: 140 },
      color: 'text-orange-500',
    },
    {
      id: 'security',
      title: 'Security',
      description: 'Vulnerability scanning & findings',
      icon: Lock,
      href: '/security',
      stats: { findings: 5, critical: 0 },
      color: 'text-red-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 justify-between">
            <div className="flex items-center gap-3">
              <Shield className="h-8 w-8 text-primary" />
              <div>
                <h1 className="text-xl font-semibold">BreakPilot Compliance</h1>
                <p className="text-sm text-muted-foreground">Admin Dashboard</p>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <Link
                href="/settings"
                className="p-2 hover:bg-muted rounded-lg transition-colors"
              >
                <Settings className="h-5 w-5" />
              </Link>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        {/* Overall Progress */}
        <div className="mb-8">
          <div className="bg-card border rounded-xl p-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-lg font-medium">Overall Compliance Score</h2>
                <p className="text-sm text-muted-foreground">
                  Based on all active modules
                </p>
              </div>
              <div className="text-4xl font-bold text-primary">
                {state?.complianceScore ?? progress?.overall ?? 0}%
              </div>
            </div>
            <div className="w-full bg-muted rounded-full h-3">
              <div
                className="bg-primary h-3 rounded-full transition-all duration-500"
                style={{
                  width: `${state?.complianceScore ?? progress?.overall ?? 0}%`,
                }}
              />
            </div>
            <div className="mt-4 grid grid-cols-5 gap-4 text-center text-sm">
              <div>
                <div className="text-muted-foreground">DSGVO</div>
                <div className="font-medium">{progress?.dsgvo ?? 0}%</div>
              </div>
              <div>
                <div className="text-muted-foreground">Compliance</div>
                <div className="font-medium">{progress?.compliance ?? 0}%</div>
              </div>
              <div>
                <div className="text-muted-foreground">Security</div>
                <div className="font-medium">{progress?.security ?? 0}%</div>
              </div>
              <div>
                <div className="text-muted-foreground">SBOM</div>
                <div className="font-medium">{progress?.sbom ?? 0}%</div>
              </div>
              <div>
                <div className="text-muted-foreground">RAG</div>
                <div className="font-medium">{progress?.rag ?? 0}%</div>
              </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 bg-muted ${module.color}`}>
                    <Icon className="h-6 w-6" />
                  </div>
                  <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                </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 gap-4 text-sm">
                  {'completed' in module.stats && (
                    <span className="text-muted-foreground">
                      <span className="font-medium text-foreground">
                        {module.stats.completed}
                      </span>
                      /{module.stats.total} complete
                    </span>
                  )}
                  {'documents' in module.stats && (
                    <span className="text-muted-foreground">
                      <span className="font-medium text-foreground">
                        {module.stats.documents}
                      </span>{' '}
                      documents
                    </span>
                  )}
                  {'components' in module.stats && (
                    <span className="text-muted-foreground">
                      <span className="font-medium text-foreground">
                        {module.stats.components}
                      </span>{' '}
                      components
                    </span>
                  )}
                  {'findings' in module.stats && (
                    <span className="text-muted-foreground">
                      <span className="font-medium text-foreground">
                        {module.stats.findings}
                      </span>{' '}
                      findings
                      {module.stats.critical > 0 && (
                        <span className="text-destructive ml-1">
                          ({module.stats.critical} critical)
                        </span>
                      )}
                    </span>
                  )}
                </div>
              </Link>
            );
          })}
        </div>

        {/* Quick Actions */}
        <div className="mt-8">
          <h2 className="text-lg font-medium mb-4">Quick Actions</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link
              href="/rag?action=ask"
              className="bg-card border rounded-lg p-4 text-center hover:border-primary/50 transition-colors"
            >
              <Search className="h-6 w-6 mx-auto mb-2 text-purple-500" />
              <span className="text-sm font-medium">Ask Legal Question</span>
            </Link>
            <Link
              href="/security/scan"
              className="bg-card border rounded-lg p-4 text-center hover:border-primary/50 transition-colors"
            >
              <Lock className="h-6 w-6 mx-auto mb-2 text-red-500" />
              <span className="text-sm font-medium">Run Security Scan</span>
            </Link>
            <Link
              href="/compliance/export"
              className="bg-card border rounded-lg p-4 text-center hover:border-primary/50 transition-colors"
            >
              <BarChart3 className="h-6 w-6 mx-auto mb-2 text-green-500" />
              <span className="text-sm font-medium">Export Report</span>
            </Link>
            <Link
              href="/dsgvo/consent"
              className="bg-card border rounded-lg p-4 text-center hover:border-primary/50 transition-colors"
            >
              <Shield className="h-6 w-6 mx-auto mb-2 text-blue-500" />
              <span className="text-sm font-medium">Manage Consents</span>
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
}