import React from 'react';
import { X, Activity, Cpu, HardDrive, Database, Layers, CheckCircle } from 'lucide-react';
import type { ModelStats } from '../types/chat';

interface DashboardModalProps {
  isOpen: boolean;
  onClose: () => void;
  stats: ModelStats;
}

export const DashboardModal: React.FC<DashboardModalProps> = ({
  isOpen,
  onClose,
  stats
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in">
      <div className="w-full max-w-2xl glass-panel rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        {/* Header */}
        <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
          <div className="flex items-center space-x-2.5">
            <Activity className="w-5 h-5 text-brand-500" />
            <div>
              <h2 className="text-base font-bold text-slate-900 dark:text-white">LawSLM System Dashboard</h2>
              <p className="text-[11px] text-slate-500 dark:text-slate-400">Real-time Architecture & Health Monitoring</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 rounded-xl text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Dashboard Grid Content */}
        <div className="p-6 overflow-y-auto space-y-6 flex-1 text-xs">
          {/* Status Metric Grid */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <MetricBox icon={<Activity className="w-4 h-4 text-emerald-500" />} label="Status" value="Online & Active" />
            <MetricBox icon={<Cpu className="w-4 h-4 text-brand-500" />} label="Execution Device" value={stats.activeDevice} />
            <MetricBox icon={<Database className="w-4 h-4 text-indigo-500" />} label="Total Parameters" value={stats.totalParams} />
            <MetricBox icon={<HardDrive className="w-4 h-4 text-amber-500" />} label="RAM / VRAM" value={stats.ramUsage} />
          </div>

          {/* Architecture Details */}
          <div className="p-4 rounded-xl bg-slate-100/70 dark:bg-darkbg-900/70 border border-slate-200 dark:border-slate-800 space-y-3">
            <div className="flex items-center justify-between font-bold text-slate-800 dark:text-slate-200 border-b border-slate-200 dark:border-slate-800 pb-2">
              <span className="flex items-center space-x-1.5">
                <Layers className="w-4 h-4 text-brand-500" />
                <span>Transformer Architectural Hyperparameters</span>
              </span>
              <span className="px-2 py-0.5 rounded bg-brand-100 dark:bg-brand-500/20 text-brand-600 dark:text-brand-400 text-[10px]">
                Built 100% From Scratch
              </span>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-slate-600 dark:text-slate-300">
              <div><span className="font-semibold text-slate-900 dark:text-white">Vocab Size:</span> {stats.vocabSize}</div>
              <div><span className="font-semibold text-slate-900 dark:text-white">Embedding Dim (d):</span> {stats.dModel}</div>
              <div><span className="font-semibold text-slate-900 dark:text-white">Layers (N):</span> {stats.nLayers}</div>
              <div><span className="font-semibold text-slate-900 dark:text-white">Attention Heads:</span> {stats.nHeads}</div>
              <div><span className="font-semibold text-slate-900 dark:text-white">Normalization:</span> RMSNorm</div>
              <div><span className="font-semibold text-slate-900 dark:text-white">Pos Encoding:</span> RoPE</div>
            </div>
          </div>

          {/* Active Checkpoint Details */}
          <div className="p-4 rounded-xl bg-slate-100/70 dark:bg-darkbg-900/70 border border-slate-200 dark:border-slate-800 space-y-2">
            <h4 className="font-bold text-slate-800 dark:text-slate-200">Loaded Checkpoint State</h4>
            <div className="flex items-center justify-between text-slate-600 dark:text-slate-300 font-mono text-[11px]">
              <span>Path: {stats.checkpointLoaded}</span>
              <span className="flex items-center space-x-1 text-emerald-500 font-semibold">
                <CheckCircle className="w-3.5 h-3.5" />
                <span>Verified</span>
              </span>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="px-6 py-3 border-t border-slate-200 dark:border-slate-800 flex justify-between items-center text-[11px] text-slate-400">
          <span>LawSLM MLOps Telemetry</span>
          <span>Lead Engineer: Amit Kumar</span>
        </div>
      </div>
    </div>
  );
};

const MetricBox: React.FC<{ icon: React.ReactNode; label: string; value: string }> = ({ icon, label, value }) => (
  <div className="p-3 rounded-xl bg-white dark:bg-darkbg-800 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col space-y-1">
    <div className="flex items-center space-x-1.5 text-slate-400">
      {icon}
      <span className="text-[10px] uppercase font-bold tracking-wider">{label}</span>
    </div>
    <span className="text-xs font-bold text-slate-900 dark:text-white">{value}</span>
  </div>
);