'use client';

import { useState } from 'react';
import { useSecurity } from '@breakpilot/compliance-sdk-react';
import Link from 'next/link';
import {
  ArrowLeft,
  Lock,
  AlertTriangle,
  AlertCircle,
  CheckCircle,
  Play,
  Loader2,
  FileCode,
  Package,
  Database,
  Shield,
} from 'lucide-react';

export default function SecurityPage() {
  const { sbom, findings, scan, isScanning, generateSbom, isGeneratingSbom } =
    useSecurity();
  const [scanTarget, setScanTarget] = useState('');

  const handleScan = async () => {
    if (!scanTarget.trim()) return;
    await scan(scanTarget);
    setScanTarget('');
  };

  const tools = [
    {
      id: 'gitleaks',
      name: 'Gitleaks',
      description: 'Secret Detection',
      icon: Lock,
    },
    {
      id: 'semgrep',
      name: 'Semgrep',
      description: 'SAST Analysis',
      icon: FileCode,
    },
    {
      id: 'bandit',
      name: 'Bandit',
      description: 'Python Security',
      icon: Shield,
    },
    {
      id: 'trivy',
      name: 'Trivy',
      description: 'Container Scanning',
      icon: Database,
    },
    {
      id: 'grype',
      name: 'Grype',
      description: 'Dependency Vulnerabilities',
      icon: Package,
    },
    {
      id: 'syft',
      name: 'Syft',
      description: 'SBOM Generation',
      icon: FileCode,
    },
  ];

  const findingsBySeverity = {
    critical: findings?.filter((f) => f.severity === 'critical').length ?? 0,
    high: findings?.filter((f) => f.severity === 'high').length ?? 0,
    medium: findings?.filter((f) => f.severity === 'medium').length ?? 0,
    low: findings?.filter((f) => f.severity === 'low').length ?? 0,
  };

  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-red-500/10">
                <Lock className="h-6 w-6 text-red-500" />
              </div>
              <div>
                <h1 className="text-xl font-semibold">Security</h1>
                <p className="text-sm text-muted-foreground">
                  Vulnerability Scanning & SBOM
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        {/* Findings Overview */}
        <div className="grid grid-cols-4 gap-4 mb-8">
          <div className="bg-card border rounded-xl p-4 border-l-4 border-l-red-500">
            <div className="text-2xl font-bold text-red-500">
              {findingsBySeverity.critical}
            </div>
            <div className="text-sm text-muted-foreground">Critical</div>
          </div>
          <div className="bg-card border rounded-xl p-4 border-l-4 border-l-orange-500">
            <div className="text-2xl font-bold text-orange-500">
              {findingsBySeverity.high}
            </div>
            <div className="text-sm text-muted-foreground">High</div>
          </div>
          <div className="bg-card border rounded-xl p-4 border-l-4 border-l-yellow-500">
            <div className="text-2xl font-bold text-yellow-500">
              {findingsBySeverity.medium}
            </div>
            <div className="text-sm text-muted-foreground">Medium</div>
          </div>
          <div className="bg-card border rounded-xl p-4 border-l-4 border-l-blue-500">
            <div className="text-2xl font-bold text-blue-500">
              {findingsBySeverity.low}
            </div>
            <div className="text-sm text-muted-foreground">Low</div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column - Scan & Tools */}
          <div className="lg:col-span-2 space-y-6">
            {/* Run Scan */}
            <div className="bg-card border rounded-xl p-6">
              <h2 className="text-lg font-semibold mb-4">Run Security Scan</h2>
              <div className="flex gap-4">
                <input
                  type="text"
                  value={scanTarget}
                  onChange={(e) => setScanTarget(e.target.value)}
                  placeholder="Enter repository path or URL..."
                  className="flex-1 px-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
                />
                <button
                  onClick={handleScan}
                  disabled={isScanning || !scanTarget.trim()}
                  className="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2"
                >
                  {isScanning ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <Play className="h-4 w-4" />
                  )}
                  Scan
                </button>
              </div>
            </div>

            {/* Tools Grid */}
            <div className="bg-card border rounded-xl p-6">
              <h2 className="text-lg font-semibold mb-4">Integrated Tools</h2>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {tools.map((tool) => {
                  const Icon = tool.icon;
                  return (
                    <div
                      key={tool.id}
                      className="p-4 border rounded-lg hover:bg-muted/50 transition-colors"
                    >
                      <div className="flex items-center gap-3 mb-2">
                        <Icon className="h-5 w-5 text-muted-foreground" />
                        <span className="font-medium">{tool.name}</span>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {tool.description}
                      </p>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Recent Findings */}
            <div className="bg-card border rounded-xl p-6">
              <h2 className="text-lg font-semibold mb-4">Recent Findings</h2>
              <div className="space-y-3">
                {findings?.slice(0, 5).map((finding) => (
                  <div
                    key={finding.id}
                    className="p-4 border rounded-lg hover:bg-muted/50 transition-colors"
                  >
                    <div className="flex items-start gap-3">
                      {finding.severity === 'critical' && (
                        <AlertCircle className="h-5 w-5 text-red-500 shrink-0" />
                      )}
                      {finding.severity === 'high' && (
                        <AlertTriangle className="h-5 w-5 text-orange-500 shrink-0" />
                      )}
                      {finding.severity === 'medium' && (
                        <AlertTriangle className="h-5 w-5 text-yellow-500 shrink-0" />
                      )}
                      {finding.severity === 'low' && (
                        <CheckCircle className="h-5 w-5 text-blue-500 shrink-0" />
                      )}
                      <div className="flex-1">
                        <div className="flex items-center justify-between">
                          <span className="font-medium">{finding.title}</span>
                          <span className="text-xs font-mono text-muted-foreground">
                            {finding.tool}
                          </span>
                        </div>
                        <p className="text-sm text-muted-foreground mt-1">
                          {finding.description?.substring(0, 100)}...
                        </p>
                        {finding.filePath && (
                          <p className="text-xs font-mono text-muted-foreground mt-2">
                            {finding.filePath}
                            {finding.lineNumber && `:${finding.lineNumber}`}
                          </p>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
                {(!findings || findings.length === 0) && (
                  <div className="text-center py-8 text-muted-foreground">
                    No findings yet. Run a scan to get started.
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Right Column - SBOM */}
          <div className="space-y-6">
            <div className="bg-card border rounded-xl p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold">SBOM</h2>
                <button
                  onClick={() => generateSbom('.')}
                  disabled={isGeneratingSbom}
                  className="text-sm text-primary hover:underline inline-flex items-center gap-1"
                >
                  {isGeneratingSbom ? (
                    <Loader2 className="h-3 w-3 animate-spin" />
                  ) : (
                    <Package className="h-3 w-3" />
                  )}
                  Generate
                </button>
              </div>

              {sbom && (
                <div className="space-y-4">
                  <div className="text-center p-4 bg-muted rounded-lg">
                    <div className="text-3xl font-bold">
                      {sbom.components?.length ?? 0}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      Components
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">By License</h3>
                    <div className="space-y-1">
                      {Object.entries(
                        sbom.components?.reduce(
                          (acc: Record<string, number>, c: any) => {
                            const license = c.license || 'Unknown';
                            acc[license] = (acc[license] || 0) + 1;
                            return acc;
                          },
                          {}
                        ) ?? {}
                      )
                        .slice(0, 5)
                        .map(([license, count]) => (
                          <div
                            key={license}
                            className="flex items-center justify-between text-sm"
                          >
                            <span>{license}</span>
                            <span className="text-muted-foreground">
                              {count as number}
                            </span>
                          </div>
                        ))}
                    </div>
                  </div>

                  <div className="pt-4 border-t space-y-2">
                    <button className="w-full px-4 py-2 border rounded-lg text-sm hover:bg-muted transition-colors">
                      Export CycloneDX
                    </button>
                    <button className="w-full px-4 py-2 border rounded-lg text-sm hover:bg-muted transition-colors">
                      Export SPDX
                    </button>
                  </div>
                </div>
              )}

              {!sbom && (
                <div className="text-center py-8 text-muted-foreground">
                  <Package className="h-12 w-12 mx-auto mb-3 opacity-30" />
                  <p className="text-sm">No SBOM generated yet</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}