Infra-Management/resources/js/Pages/Security/Index.jsx

import AppLayout from '@/Layouts/AppLayout';
import { Head, router } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { Shield, AlertTriangle, CheckCircle, TrendingUp, Scan, Lock, Bug } from 'lucide-react';
import { GlassCard, StatCard } from '@/Components/ui/GlassCard';
import { StatusBadge } from '@/Components/ui/StatusBadge';
import { Button } from '@/Components/ui/Button';
import { ProgressBar } from '@/Components/ui/ProgressBar';
import { DataTable } from '@/Components/ui/DataTable';
import { timeAgo, getSecurityGradeColor } from '@/lib/utils';
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, ResponsiveContainer } from 'recharts';
import { cn } from '@/lib/utils';

const radarData = [
    { subject: 'Patching',    A: 85 },
    { subject: 'Access Ctrl', A: 72 },
    { subject: 'Encryption',  A: 90 },
    { subject: 'Network',     A: 65 },
    { subject: 'Monitoring',  A: 78 },
    { subject: 'Compliance',  A: 60 },
];

function ScoreRing({ score, grade }) {
    const color = grade === 'A' ? '#00ff88' : grade === 'B' ? '#00d4ff' : grade === 'C' ? '#ffd700' : grade === 'D' ? '#ff6b35' : '#ff2d55';
    const r = 60, circumference = 2 * Math.PI * r;
    const dash = (score / 100) * circumference;
    return (
        <div className="relative inline-flex items-center justify-center">
            <svg className="w-40 h-40 -rotate-90">
                <circle cx="80" cy="80" r={r} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="8" />
                <circle cx="80" cy="80" r={r} fill="none" stroke={color} strokeWidth="8"
                    strokeDasharray={`${dash} ${circumference}`}
                    strokeLinecap="round"
                    style={{ filter: `drop-shadow(0 0 8px ${color}60)` }}
                />
            </svg>
            <div className="absolute text-center">
                <p className="text-4xl font-bold" style={{ color }}>{score}</p>
                <p className="text-xs text-white/40">/ 100</p>
            </div>
        </div>
    );
}

export default function SecurityIndex({ scores, scans, stats }) {
    const avgScore = scores?.avg ?? 72;
    const grade = avgScore >= 90 ? 'A' : avgScore >= 75 ? 'B' : avgScore >= 60 ? 'C' : avgScore >= 45 ? 'D' : 'F';

    const scanColumns = [
        { header: 'Target', accessor: 'target_name', render: row => (
            <div>
                <p className="text-sm text-white">{row.target_name}</p>
                <p className="text-xs text-white/30 capitalize">{row.target_type} · {row.scan_type}</p>
            </div>
        )},
        { header: 'Score', accessor: 'score', render: row => (
            <div className="flex items-center gap-2">
                <span className={`text-lg font-bold ${getSecurityGradeColor(row.grade)}`}>{row.grade}</span>
                <span className="text-sm text-white/60">{row.score ?? '—'}</span>
            </div>
        )},
        { header: 'Findings', key: 'findings', render: row => (
            <div className="flex items-center gap-1 text-xs">
                {row.critical_count > 0 && <span className="px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">{row.critical_count}C</span>}
                {row.high_count > 0 && <span className="px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400">{row.high_count}H</span>}
                {row.medium_count > 0 && <span className="px-1.5 py-0.5 rounded bg-yellow-500/20 text-yellow-400">{row.medium_count}M</span>}
                {row.low_count > 0 && <span className="px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400">{row.low_count}L</span>}
            </div>
        )},
        { header: 'Status', accessor: 'status', render: row => <StatusBadge status={row.status} /> },
        { header: 'Scanned', accessor: 'completed_at', render: row => (
            <span className="text-xs text-white/40">{timeAgo(row.completed_at)}</span>
        )},
    ];

    return (
        <AppLayout title="Security">
            <Head title="Security Dashboard" />
            <div className="space-y-5">
                <div className="flex items-center justify-between">
                    <div>
                        <h2 className="text-xl font-bold text-white">Cybersecurity Dashboard</h2>
                        <p className="text-sm text-white/40">Security posture across all infrastructure</p>
                    </div>
                    <div className="flex gap-2">
                        <a href="/security/scans"><Button variant="secondary" icon={Scan}>Scans</Button></a>
                        <a href="/security/compliance"><Button variant="secondary" icon={CheckCircle}>Compliance</Button></a>
                    </div>
                </div>

                {/* Score + Radar */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <GlassCard className="p-6 flex flex-col items-center justify-center gap-3" glow="green">
                        <h3 className="text-sm font-semibold text-white/60">Overall Security Score</h3>
                        <ScoreRing score={avgScore} grade={grade} />
                        <div className="flex items-center gap-2">
                            <span className={cn('text-3xl font-bold', getSecurityGradeColor(grade))}>Grade {grade}</span>
                        </div>
                        <p className="text-xs text-white/30 text-center">Based on {scans?.total ?? 0} scans across infrastructure</p>
                    </GlassCard>

                    <GlassCard className="p-5 lg:col-span-2">
                        <h3 className="text-sm font-semibold text-white mb-1">Security Radar</h3>
                        <p className="text-xs text-white/30 mb-3">Coverage across security domains</p>
                        <ResponsiveContainer width="100%" height={220}>
                            <RadarChart cx="50%" cy="50%" outerRadius={80} data={radarData}>
                                <PolarGrid stroke="rgba(255,255,255,0.1)" />
                                <PolarAngleAxis dataKey="subject" tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 11 }} />
                                <Radar name="Score" dataKey="A" stroke="#00d4ff" fill="#00d4ff" fillOpacity={0.15} strokeWidth={2} />
                            </RadarChart>
                        </ResponsiveContainer>
                    </GlassCard>
                </div>

                {/* Stats */}
                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
                    <StatCard title="Critical"  value={stats?.critical ?? 0}  color="red"    icon={AlertTriangle} />
                    <StatCard title="High"      value={stats?.high ?? 0}      color="orange" icon={Bug} />
                    <StatCard title="Medium"    value={stats?.medium ?? 0}    color="orange" />
                    <StatCard title="Low"       value={stats?.low ?? 0}       color="blue" />
                </div>

                {/* Scan results table */}
                <GlassCard className="p-5">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="text-sm font-semibold text-white">Recent Scans</h3>
                        <Button icon={Scan} size="sm" onClick={() => router.post('/security/scans')}>Run Scan</Button>
                    </div>
                    <DataTable
                        columns={scanColumns}
                        data={scans?.data ?? []}
                        emptyMessage="No scans yet. Run your first security scan."
                    />
                </GlassCard>
            </div>
        </AppLayout>
    );
}