import { useEffect, useState } from 'react';
import { Activity, ShieldCheck, ArrowUpRight, CheckCircle2 } from 'lucide-react';
import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js';
import { Radar } from 'react-chartjs-2';

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

export default function Dashboard() {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    setChartData({
      labels: ['Cultural Nuance', 'Safety Alignment', 'Grammar/Syntax', 'Local Idioms', 'Legal Compliance', 'Tone/Hierarchy'],
      datasets: [
        {
          label: 'Optimized',
          data: [98, 95, 99, 92, 97, 96],
          backgroundColor: 'rgba(0, 229, 255, 0.3)',
          borderColor: '#00E5FF',
          pointBackgroundColor: '#00E5FF',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: '#00E5FF',
          borderWidth: 2,
        },
        {
          label: 'Raw LLM',
          data: [45, 60, 85, 30, 50, 40],
          backgroundColor: 'rgba(74, 85, 104, 0.2)',
          borderColor: '#4A5568',
          pointBackgroundColor: '#4A5568',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: '#4A5568',
          borderWidth: 2,
        },
      ],
    });
  }, []);

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
    },
    scales: {
      r: {
        angleLines: { color: 'rgba(255, 255, 255, 0.05)' },
        grid: { color: 'rgba(255, 255, 255, 0.05)' },
        pointLabels: {
          color: '#4A5568',
          font: { family: 'Roboto Mono', size: 10 },
        },
        ticks: { display: false },
        suggestedMin: 0,
        suggestedMax: 100,
      },
    },
  };

  return (
    <section className="py-32 px-6 max-w-7xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
        <div>
          <span className="clinical-text text-aurora-cyan mb-4 block">Intelligence Dashboard</span>
          <h2 className="text-4xl font-bold tracking-tight">Nordic AI Compliance & Data Ops Hub</h2>
        </div>
        <div className="flex items-center gap-4 px-4 py-2 glass-card border-aurora-cyan/20">
          <Activity className="w-4 h-4 text-aurora-cyan animate-pulse" />
          <span className="clinical-text text-[10px]">Real-time System Monitoring Active</span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[240px]">
        
        {/* Radar Chart Card */}
        <div className="md:col-span-2 lg:col-span-2 lg:row-span-2 glass-card p-8 flex flex-col bg-white/[0.01]">
          <div className="flex items-center justify-between mb-6">
            <h3 className="clinical-text text-xs">RLHF Accuracy Metrics</h3>
            <div className="flex gap-4 text-[8px] clinical-text">
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 bg-stone-gray/40 rounded-sm"></div> Raw LLM
              </div>
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 bg-aurora-cyan rounded-sm"></div> Optimized
              </div>
            </div>
          </div>
          <div className="flex-1 min-h-0 relative w-full flex items-center justify-center">
            {chartData && <Radar data={chartData} options={chartOptions} />}
          </div>
        </div>

        {/* EU AI Act Status */}
        <div className="glass-card p-8 flex flex-col justify-between border-aurora-cyan/10 bg-aurora-cyan/[0.01]">
          <div className="flex items-center justify-between">
            <ShieldCheck className="w-5 h-5 text-aurora-cyan" />
            <span className="clinical-text text-[8px] text-aurora-cyan">Live Status</span>
          </div>
          <div>
            <h3 className="text-sm font-bold mb-1">EU AI Act Compliance</h3>
            <p className="text-[10px] text-stone-gray">Nordic Adaptation Framework v2.4</p>
          </div>
          <div className="space-y-3">
            <div className="flex items-center justify-between text-[10px]">
              <span className="opacity-50">Risk Assessment</span>
              <span className="text-green-400">PASSED</span>
            </div>
            <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
              <div className="h-full w-[94%] bg-aurora-cyan"></div>
            </div>
            <div className="flex items-center gap-2 text-[9px] text-aurora-cyan/60">
              <CheckCircle2 className="w-3 h-3" />
              <span>94% Alignment Score</span>
            </div>
          </div>
        </div>

        {/* Case Study 1 */}
        <div className="glass-card p-8 cursor-pointer hover:bg-white/[0.03] transition-colors relative group">
          <div className="flex justify-between items-start mb-4">
            <div className="px-2 py-1 bg-white/5 rounded text-[8px] clinical-text">Healthcare</div>
            <ArrowUpRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity text-aurora-cyan" />
          </div>
          <h3 className="text-lg font-bold mb-2 leading-tight">Medical AI Localization</h3>
          <div className="text-aurora-cyan font-mono text-xs mb-3">0% Hallucination Rate</div>
          <p className="text-[10px] text-stone-gray leading-relaxed">
            Optimizing diagnostic prompts for Norwegian healthcare protocols.
          </p>
        </div>

      </div>
    </section>
  );
}