"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowUpRightIcon,
  ArrowDownRightIcon,
  SparklesIcon,
  ClockIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import api from '../lib/api';
import { DashboardStats, Vulnerability, AIPriorityResponse } from '../types';
import AIRecommendations from '@/components/AIRecommendations';

// Compact CVE table widget used twice on the dashboard (Recent Critical
// + Newly Published). Same shape, different feeder list so the operator
// can compare 'highest current risk' vs 'just published' at a glance.
function renderVulnWidget(opts: {
  title: string;
  subtitle: string;
  vulns: Vulnerability[];
  onRowClick: (cveId: string) => void;
}) {
  const { title, subtitle, vulns, onRowClick } = opts;
  const prioCls = (p: number | null | undefined) =>
    p == null ? 'text-gray-400'
      : p >= 80 ? 'text-red-700 font-bold'
        : p >= 50 ? 'text-orange-700 font-bold'
          : p >= 20 ? 'text-yellow-700' : 'text-gray-600';
  const cprCls = (c: number | null | undefined) =>
    c == null ? 'text-gray-400'
      : c >= 50 ? 'text-red-700 font-bold'
        : c >= 20 ? 'text-orange-700' : 'text-gray-600';
  return (
    <div className="bg-white border border-gray-200 shadow-sm rounded-sm overflow-hidden">
      <div className="p-4 border-b border-gray-200 flex justify-between items-baseline bg-gray-50/50">
        <div>
          <h3 className="text-base font-bold text-gray-900 font-mono">{title}</h3>
          <p className="text-[11px] text-gray-500 font-mono mt-0.5">{subtitle}</p>
        </div>
        <Link href="/vulnerabilities" prefetch className="text-vulncheck-blue text-[10px] font-bold uppercase tracking-wider font-mono hover:text-blue-700">View All &gt;</Link>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase">CVE</th>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase">Sev</th>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase" title="CVSS Base Score">CVSS</th>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase" title="Priority Score 0-100">PRIO</th>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase" title="CPR 0-100 (JacquesKruger)">CPR</th>
              <th className="px-3 py-2 text-left text-[10px] font-mono font-medium text-gray-500 uppercase">Flags</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 font-mono text-xs">
            {vulns.map((vuln) => (
              <tr key={vuln.id} onClick={() => onRowClick(vuln.cve_id)} className="cursor-pointer hover:bg-gray-50 transition-colors">
                <td className="px-3 py-2 whitespace-nowrap font-bold text-indigo-600 hover:text-indigo-800">{vuln.cve_id}</td>
                <td className="px-3 py-2 whitespace-nowrap">
                  <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold ${vuln.severity === 'critical' ? 'bg-red-100 text-red-700'
                    : vuln.severity === 'high' ? 'bg-orange-100 text-orange-700'
                      : vuln.severity === 'medium' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
                    }`}>
                    {vuln.severity.toUpperCase().slice(0, 4)}
                  </span>
                </td>
                <td className="px-3 py-2 whitespace-nowrap font-bold">{vuln.cvss_score ?? '—'}</td>
                <td className={`px-3 py-2 whitespace-nowrap ${prioCls(vuln.priority_score ?? null)}`}>
                  {vuln.priority_score == null ? '—' : vuln.priority_score.toFixed(0)}
                </td>
                <td className={`px-3 py-2 whitespace-nowrap ${cprCls(vuln.cpr_score ?? null)}`}>
                  {vuln.cpr_score == null ? '—' : vuln.cpr_score.toFixed(1)}
                </td>
                <td className="px-3 py-2 whitespace-nowrap">
                  <div className="flex gap-1 flex-wrap">
                    {vuln.kev_listed && <span className="inline-flex items-center rounded bg-red-100 px-1 py-0.5 text-[9px] font-bold text-red-700">KEV</span>}
                    {vuln.euvd_listed && <span className="inline-flex items-center rounded bg-blue-100 px-1 py-0.5 text-[9px] font-bold text-blue-700">EUVD</span>}
                    {vuln.exploitation_status && vuln.exploitation_status !== 'none' && (
                      <span className={`inline-flex items-center rounded px-1 py-0.5 text-[9px] font-bold uppercase ${vuln.exploitation_status === 'widespread' ? 'bg-red-600 text-white'
                        : vuln.exploitation_status === 'active' ? 'bg-orange-100 text-orange-700'
                          : 'bg-yellow-100 text-yellow-700'
                        }`}>{vuln.exploitation_status.slice(0, 4)}</span>
                    )}
                  </div>
                </td>
              </tr>
            ))}
            {vulns.length === 0 && (
              <tr><td colSpan={6} className="text-center py-4 text-gray-500">No data.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default function Dashboard() {
  const router = useRouter();
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [recentVulns, setRecentVulns] = useState<Vulnerability[]>([]);
  const [aiPriorities, setAiPriorities] = useState<AIPriorityResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [aiLoading, setAiLoading] = useState(false);
  const [aiError, setAiError] = useState<string | null>(null);
  const [aiSeverity, setAiSeverity] = useState<string>('all');
  const [aiAbortController, setAiAbortController] = useState<AbortController | null>(null);
  const [showHistory, setShowHistory] = useState(false);
  const [historyReports, setHistoryReports] = useState<any[]>([]);

  const fetchAIRecommendations = async (severityFilter?: string) => {
    setAiLoading(true);
    setAiError(null);
    const controller = new AbortController();
    setAiAbortController(controller);
    try {
      console.log(`Triggering AI Audit (Severity: ${severityFilter || aiSeverity})...`);
      const params = (severityFilter || aiSeverity) !== 'all' ? { severity: severityFilter || aiSeverity } : {};
      const res = await api.get('/api/v1/vulnerabilities/ai-prioritization', { params, signal: controller.signal });
      console.log("AI Response received:", res.data);
      setAiPriorities(res.data);
      if (res.data.error) {
        setAiError(res.data.error);
      }
    } catch (error: any) {
      if (error.name === 'CanceledError' || error.code === 'ERR_CANCELED') {
        console.log("AI Audit cancelled by user.");
        setAiError(null);
      } else {
        console.error("Failed to fetch AI recommendations:", error);
        setAiError(error.response?.data?.detail || "The AI session timed out. Please try again.");
      }
    } finally {
      setAiLoading(false);
      setAiAbortController(null);
    }
  };

  const cancelAIAudit = () => {
    if (aiAbortController) {
      aiAbortController.abort();
    }
  };

  const loadHistory = async () => {
    try {
      const res = await api.get('/api/v1/vulnerabilities/ai-history');
      setHistoryReports(res.data);
      setShowHistory(true);
    } catch (e) {
      console.error("Failed to load history", e);
    }
  };

  const loadReport = (report: any) => {
    setAiPriorities({
      global_strategy: report.global_strategy,
      recommendations: report.recommendations
    });
    setShowHistory(false);
  };

  // Number of enabled scan schedules — drives the "Sync active" badge
  // in the stat cards. Hardcoded label before this commit always said
  // "Sync active" even when no schedules existed, which tester flagged
  // as misleading.
  const [activeScheduleCount, setActiveScheduleCount] = useState<number | null>(null);
  // Compliance widget feed
  type ComplianceSummary = {
    assets_with_compliance: number;
    total_policies: number;
    avg_score_all: number | null;
    pass_total: number;
    fail_total: number;
    not_applicable_total: number;
    worst_offenders: Array<{
      asset_id: number;
      hostname: string;
      avg_score: number | null;
      worst_policy: string | null;
    }>;
  };
  const [compliance, setCompliance] = useState<ComplianceSummary | null>(null);
  type URSRow = {
    asset_id: number; hostname: string | null;
    avs: number | null; ass: number | null; urs: number | null;
    severity: 'CRITICAL'|'HIGH'|'MEDIUM'|'LOW'|'NONE';
    criticality: string | null;
  };
  const [ursTop, setUrsTop] = useState<URSRow[]>([]);
  // Two split widgets — Recent Critical (high impact, recently changed)
  // and Newly Published (chronological first-seen).
  const [criticalVulns, setCriticalVulns] = useState<Vulnerability[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [statsRes, vulnsRes, criticalRes, schedRes, compRes, ursRes] = await Promise.all([
          api.get('/api/v1/vulnerabilities/reports/dashboard'),
          // Newly Published: sort by published_date desc, wide window
          // so client-side dedup still surfaces 10 distinct CVEs.
          api.get('/api/v1/vulnerabilities?limit=80&status=open&sort_by=published_date&sort_order=desc'),
          // Recent Critical: CVSS ≥ 8 OR KEV OR EUVD, sort by updated_at
          // desc ("recently re-scored" — catches Vulnrichment corrections,
          // KEV listings, etc.).
          api.get('/api/v1/vulnerabilities?limit=80&status=open&sort_by=updated_at&sort_order=desc')
            .catch(() => ({ data: { items: [] } })),
          api.get('/api/v1/scans/schedules').catch(() => ({ data: [] })),
          api.get('/api/v1/compliance/summary').catch(() => ({ data: null })),
          api.get('/api/v1/compliance/urs?limit=200').catch(() => ({ data: [] })),
        ]);
        setStats(statsRes.data);
        // Newly Published — dedup by CVE-ID, keep first occurrence
        // (already sorted by published_date desc).
        const rawVulns: Vulnerability[] = vulnsRes.data.items || vulnsRes.data;
        const seenPublished = new Set<string>();
        const recentPublished: Vulnerability[] = [];
        for (const v of rawVulns) {
          if (v.cve_id && !seenPublished.has(v.cve_id)) {
            seenPublished.add(v.cve_id);
            recentPublished.push(v);
            if (recentPublished.length >= 10) break;
          }
        }
        setRecentVulns(recentPublished);

        // Recent Critical — dedup + filter (CVSS ≥ 8 OR KEV OR EUVD).
        const rawCritical: Vulnerability[] =
          (criticalRes.data && (criticalRes.data.items || criticalRes.data)) || [];
        const seenCritical = new Set<string>();
        const recentCritical: Vulnerability[] = [];
        for (const v of rawCritical) {
          const isCritical =
            (v.cvss_score ?? 0) >= 8.0 || v.kev_listed === true || v.euvd_listed === true;
          if (!isCritical) continue;
          if (v.cve_id && !seenCritical.has(v.cve_id)) {
            seenCritical.add(v.cve_id);
            recentCritical.push(v);
            if (recentCritical.length >= 10) break;
          }
        }
        setCriticalVulns(recentCritical);

        const schedules = Array.isArray(schedRes.data) ? schedRes.data : [];
        setActiveScheduleCount(schedules.filter((s: any) => s.enabled).length);
        setCompliance(compRes.data);
        setUrsTop(Array.isArray(ursRes.data) ? ursRes.data : []);
      } catch (error) {
        console.error("Failed to fetch dashboard data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div className="p-8 text-center">Loading Dashboard...</div>;
  }

  const statItems = [
    { name: 'CRITICAL', value: stats?.critical_count, change: '+0', changeType: 'increase', color: 'text-securis-danger' },
    { name: 'HIGH', value: stats?.high_count, change: '+0', changeType: 'decrease', color: 'text-vulncheck-blue' },
    { name: 'MEDIUM', value: stats?.medium_count, change: '+0', changeType: 'increase', color: 'text-blue-600' },
    { name: 'LOW', value: stats?.low_count, change: '+0', changeType: 'decrease', color: 'text-green-600' },
  ];
  return (
    <div className="max-w-7xl mx-auto">
      {/* Header Section */}
      <div className="md:flex md:items-center md:justify-between mb-8">
        <div className="min-w-0 flex-1">
          <h2 className="text-3xl font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight font-mono">
            Vulnerability Dashboard
          </h2>
          <p className="mt-1 text-sm text-gray-500">Monitor and manage security vulnerabilities across your infrastructure</p>
        </div>
        <div className="mt-4 flex md:ml-4 md:mt-0 items-center gap-2">
          <div className="flex items-center ring-1 ring-inset ring-gray-300 rounded-md bg-white px-2">
            <span className="text-xs font-mono text-gray-500 mr-1 uppercase font-bold text-indigo-600">Audit filter:</span>
            <select
              value={aiSeverity}
              onChange={(e) => setAiSeverity(e.target.value)}
              disabled={aiLoading}
              className="bg-transparent text-sm font-semibold text-gray-900 py-2 focus:outline-none border-none cursor-pointer font-mono"
            >
              <option value="all">Any Severity</option>
              <option value="critical">Critical Only</option>
              <option value="high">High Only</option>
              <option value="medium">Medium Only</option>
              <option value="low">Low Only</option>
            </select>
          </div>
          {aiLoading ? (
            <button
              onClick={cancelAIAudit}
              className="inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-red-300 bg-red-50 text-red-700 hover:bg-red-100 transition-all"
            >
              <svg className="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
              Cancel AI Audit
            </button>
          ) : (
            <button
              onClick={() => fetchAIRecommendations()}
              className="inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-indigo-50 hover:ring-indigo-300 transition-all"
            >
              <SparklesIcon className="h-4 w-4 mr-2 text-indigo-600" />
              AI Audit
            </button>
          )}
          <button
            onClick={loadHistory}
            className="inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50 transition-all ml-2"
            title="View Scan History"
          >
            <ClockIcon className="h-4 w-4 text-gray-500" />
          </button>
          <button
            type="button"
            className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
          >
            Export Report
          </button>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        {statItems.map((item) => (
          <div
            key={item.name}
            onClick={() => router.push(`/vulnerabilities?severity=${item.name.toLowerCase()}`)}
            className="relative overflow-hidden rounded-sm bg-white border border-gray-200 p-6 shadow-sm cursor-pointer hover:border-gray-400 hover:shadow-md transition-all"
          >
            <dt>
              <p className="truncate text-xs font-bold text-gray-500 uppercase tracking-wider font-mono">{item.name}</p>
            </dt>
            <dd className="flex items-baseline pb-1 sm:pb-2">
              <p className={`text-4xl font-bold ${item.color || 'text-gray-900'} font-mono`}>{item.value ?? '-'}</p>
            </dd>
            <div className="flex items-center text-xs text-gray-500 gap-1.5">
              {activeScheduleCount === null ? (
                <span className="font-mono text-gray-400">checking…</span>
              ) : activeScheduleCount > 0 ? (
                <>
                  <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
                  <span className="font-mono" title="Scheduled syncs enabled in Settings → Scan Schedules">
                    {activeScheduleCount} scheduled sync{activeScheduleCount === 1 ? '' : 's'}
                  </span>
                </>
              ) : (
                <>
                  <span className="inline-block h-1.5 w-1.5 rounded-full bg-gray-300" />
                  <span className="font-mono text-gray-400" title="No enabled scan schedules — data only updates on manual sync">
                    No scheduled syncs
                  </span>
                </>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* URS widget — Unified Risk Score (Plan E) — hidden until any asset has URS */}
      {ursTop.some(r => r.urs !== null) && (() => {
        const scored = ursTop.filter(r => r.urs !== null);
        const avgUrs = scored.length ? scored.reduce((s, r) => s + (r.urs || 0), 0) / scored.length : null;
        const counts = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0, NONE: 0 } as Record<string, number>;
        scored.forEach(r => { counts[r.severity] = (counts[r.severity] || 0) + 1; });
        const top5 = [...scored].sort((a, b) => (b.urs || 0) - (a.urs || 0)).slice(0, 5);
        const sevClass = (s: string) =>
          s === 'CRITICAL' ? 'bg-red-700 text-white' :
          s === 'HIGH'     ? 'bg-red-100 text-red-700' :
          s === 'MEDIUM'   ? 'bg-orange-100 text-orange-700' :
          s === 'LOW'      ? 'bg-emerald-100 text-emerald-700' :
                             'bg-gray-100 text-gray-500';
        const avgClass =
          avgUrs === null         ? 'text-gray-400' :
          avgUrs >= 90            ? 'text-red-700'  :
          avgUrs >= 70            ? 'text-red-600'  :
          avgUrs >= 40            ? 'text-orange-700' :
                                    'text-emerald-700';
        return (
          <div className="bg-white border border-gray-200 rounded-sm shadow-sm p-6 mb-8">
            <div className="flex items-baseline justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-900 font-mono">
                Unified Risk Score (URS)
              </h3>
              <Link href="/compliance" prefetch className="text-vulncheck-blue text-xs font-bold uppercase tracking-wider font-mono hover:text-blue-700">
                Open &gt;
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono">Avg URS</p>
                <p className={`text-4xl font-mono mt-1 ${avgClass}`}>
                  {avgUrs !== null ? avgUrs.toFixed(1) : '—'}
                </p>
                <p className="text-xs text-gray-400 font-mono mt-2">{scored.length} assets scored</p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono mb-2">Severity spread</p>
                <div className="flex flex-wrap gap-1.5">
                  {(['CRITICAL','HIGH','MEDIUM','LOW','NONE'] as const).map(sev => (
                    counts[sev] > 0 && (
                      <span key={sev} className={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-bold ${sevClass(sev)}`}>
                        {sev} {counts[sev]}
                      </span>
                    )
                  ))}
                </div>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono mb-2">Highest-risk assets</p>
                <ul className="space-y-1 text-sm font-mono">
                  {top5.map(r => (
                    <li key={r.asset_id} className="flex justify-between gap-2">
                      <span className="truncate">{r.hostname || `#${r.asset_id}`}</span>
                      <span className="flex items-center gap-1.5">
                        <span className="text-gray-700 font-bold">
                          {r.urs !== null ? r.urs.toFixed(0) : '—'}
                        </span>
                        <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-bold ${sevClass(r.severity)}`}>
                          {r.severity}
                        </span>
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        );
      })()}

      {/* Compliance widget — hidden if no SCA data yet */}
      {compliance && compliance.assets_with_compliance > 0 && (() => {
        const score = compliance.avg_score_all;
        const scoreCls = score === null ? 'text-gray-400'
          : score >= 90 ? 'text-emerald-700'
          : score >= 70 ? 'text-yellow-700'
          : score >= 40 ? 'text-orange-700' : 'text-red-700';
        const barCls = score === null ? 'bg-gray-200'
          : score >= 90 ? 'bg-emerald-500'
          : score >= 70 ? 'bg-yellow-500'
          : score >= 40 ? 'bg-orange-500' : 'bg-red-500';
        return (
          <div className="bg-white border border-gray-200 rounded-sm shadow-sm p-6 mb-8">
            <div className="flex items-baseline justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-900 font-mono">
                Compliance (Wazuh SCA)
              </h3>
              <Link href="/compliance" prefetch className="text-vulncheck-blue text-xs font-bold uppercase tracking-wider font-mono hover:text-blue-700">
                Open &gt;
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono">Avg score</p>
                <p className={`text-4xl font-mono mt-1 ${scoreCls}`}>
                  {score !== null ? `${score.toFixed(1)}%` : '—'}
                </p>
                <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-100 mt-2">
                  <div className={`h-full ${barCls}`} style={{ width: `${score ?? 0}%` }} />
                </div>
                <p className="text-xs text-gray-400 font-mono mt-2">
                  {compliance.assets_with_compliance} assets · {compliance.total_policies} policy runs
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono">Check totals</p>
                <div className="grid grid-cols-3 gap-2 mt-2 text-center">
                  <div>
                    <p className="text-xl font-mono font-bold text-emerald-700">{compliance.pass_total.toLocaleString()}</p>
                    <p className="text-[10px] uppercase text-gray-500 font-mono">Pass</p>
                  </div>
                  <div>
                    <p className="text-xl font-mono font-bold text-red-700">{compliance.fail_total.toLocaleString()}</p>
                    <p className="text-[10px] uppercase text-gray-500 font-mono">Fail</p>
                  </div>
                  <div>
                    <p className="text-xl font-mono font-bold text-gray-500">{compliance.not_applicable_total.toLocaleString()}</p>
                    <p className="text-[10px] uppercase text-gray-500 font-mono">N/A</p>
                  </div>
                </div>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wider text-gray-500 font-mono mb-2">Worst offenders</p>
                <ul className="space-y-1 text-sm font-mono">
                  {compliance.worst_offenders.slice(0, 3).map(o => {
                    const c = o.avg_score === null ? 'text-gray-400'
                      : o.avg_score >= 70 ? 'text-yellow-700'
                      : o.avg_score >= 40 ? 'text-orange-700' : 'text-red-700';
                    return (
                      <li key={o.asset_id} className="flex justify-between gap-2">
                        <Link href={`/compliance`} className="text-vulncheck-blue hover:underline truncate" title={o.worst_policy || ''}>
                          {o.hostname}
                        </Link>
                        <span className={`${c} font-bold`}>
                          {o.avg_score !== null ? `${o.avg_score.toFixed(0)}%` : '—'}
                        </span>
                      </li>
                    );
                  })}
                  {compliance.worst_offenders.length === 0 && (
                    <li className="text-gray-400 text-xs">All assets above threshold.</li>
                  )}
                </ul>
              </div>
            </div>
          </div>
        );
      })()}

      {/* AI Smart Priorities */}
      <AIRecommendations
        recommendations={aiPriorities?.recommendations || []}
        strategy={aiPriorities?.global_strategy}
        loading={aiLoading}
        error={aiError}
      />


      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        {/* Chart Section Placeholder */}
        <div className="lg:col-span-2 bg-white border border-gray-200 p-6 rounded-sm shadow-sm">
          <div className="mb-6">
            <h3 className="text-lg font-bold text-gray-900 font-mono">Severity Breakdown — Last 7 Days</h3>
          </div>
          <div className="h-48 flex items-end justify-between gap-4 px-4 pt-4 border-b border-gray-100 pb-2">
            {stats?.severity_history.map((h, idx) => {
              const maxCount = Math.max(...(stats?.severity_history.map(s => s.count) || [1]));
              const height = stats?.severity_history ? (h.count / maxCount * 100) : 0;
              const colors = ['bg-amber-900', 'bg-amber-700', 'bg-vulncheck-blue', 'bg-blue-900', 'bg-red-700', 'bg-green-900', 'bg-blue-500'];

              return (
                <div
                  key={idx}
                  className={`w-full ${colors[idx % colors.length]} rounded-t-sm transition-all duration-500 ease-out`}
                  style={{ height: `${Math.max(height, 5)}%`, opacity: h.count === 0 ? 0.3 : 1 }}
                  title={`${h.day}: ${h.count} new vulns`}
                ></div>
              );
            })}
          </div>
          <div className="flex justify-between px-4 text-xs text-gray-400 font-mono mt-2">
            {stats?.severity_history.map((h, idx) => (
              <span key={idx} className="w-full text-center">{h.day}</span>
            ))}
          </div>
        </div>

        <div className="bg-white border border-gray-200 p-6 rounded-sm shadow-sm">
          <div className="mb-6">
            <h3 className="text-lg font-bold text-gray-900 font-mono">Scan Coverage</h3>
          </div>

          <div className="space-y-6">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-500 font-mono">Assets Scanned</span>
                <span className="font-bold flex font-mono">{stats?.scanned_assets.toLocaleString() || 0} <span className="text-gray-400 font-normal ml-1">/ {stats?.total_assets.toLocaleString() || 0}</span></span>
              </div>
              <div className="w-full bg-gray-100 rounded-full h-2.5">
                <div
                  className="bg-vulncheck-blue h-2.5 rounded-full"
                  style={{ width: `${stats?.total_assets ? (stats.scanned_assets / stats.total_assets * 100) : 0}%` }}
                ></div>
              </div>
              <div className="mt-2 text-right">
                <span className="text-xs font-bold text-green-600 font-mono">
                  {stats?.total_assets ? (stats.scanned_assets / stats.total_assets * 100).toFixed(1) : '0.0'}% Coverage
                </span>
              </div>
            </div>

            <div className="pt-4 border-t border-gray-100">
              <div className="flex justify-between text-sm py-1">
                <span className="text-gray-500 font-mono">Last Full Scan</span>
                <span className="font-mono text-gray-900">Continuous</span>
              </div>
              <div className="flex justify-between text-sm py-1">
                <span className="text-gray-500 font-mono">Scan Frequency</span>
                <span className="font-mono text-gray-900">Automated</span>
              </div>
              <div className="flex justify-between text-sm py-1">
                <span className="text-gray-500 font-mono">Coverage Rate</span>
                <span className={`font-mono font-bold ${stats?.total_assets && (stats.scanned_assets / stats.total_assets) === 1 ? 'text-green-600' : 'text-blue-600'}`}>
                  {stats?.total_assets ? (stats.scanned_assets / stats.total_assets * 100).toFixed(1) : '0.0'}%
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>



      {
        showHistory && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-500 bg-opacity-75">
            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-bold font-mono">AI Audit History</h3>
                <button onClick={() => setShowHistory(false)} className="text-gray-400 hover:text-gray-600">
                  <span className="sr-only">Close</span>
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>
              </div>
              <div className="space-y-2">
                {historyReports.map((report) => (
                  <div key={report.id} onClick={() => loadReport(report)} className="p-4 border border-gray-200 rounded hover:bg-indigo-50 cursor-pointer flex justify-between items-center transition-colors">
                    <div>
                      <p className="font-bold text-sm text-gray-900">{new Date(report.created_at).toLocaleString()}</p>
                      <p className="text-xs text-gray-500 truncate max-w-md">{report.global_strategy.substring(0, 100)}...</p>
                    </div>
                    <span className="text-xs font-mono bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full">
                      {report.recommendations_count} Findings
                    </span>
                  </div>
                ))}
                {historyReports.length === 0 && <p className="text-gray-500 text-center py-4">No history available yet.</p>}
              </div>
            </div>
          </div>
        )
      }

      {/* Recent Vulnerabilities — split widgets:
          left = Recent Critical CVEs (CVSS ≥ 8 OR KEV OR EUVD, sort updated_at desc)
          right = Newly Published CVEs (sort published_date desc) */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {renderVulnWidget({
          title: 'Recent Critical CVEs',
          subtitle: 'CVSS ≥ 8 or KEV or EUVD · sorted by last update',
          vulns: criticalVulns,
          onRowClick: (cveId) => router.push(`/vulnerabilities?cve_id=${cveId}`),
        })}
        {renderVulnWidget({
          title: 'Newly Published CVEs',
          subtitle: 'All severities · sorted by CVE published date',
          vulns: recentVulns,
          onRowClick: (cveId) => router.push(`/vulnerabilities?cve_id=${cveId}`),
        })}
      </div>
    </div >
  );
}
