import React, { useState, useMemo, useEffect } from 'react';
import { 
  Layout, 
  FileText, 
  CheckCircle, 
  Clock, 
  Settings, 
  Plus, 
  Search, 
  Bell, 
  Shield, 
  MessageSquare, 
  FileCheck, 
  XCircle, 
  FileCode, 
  FolderOpen,
  Activity,
  Award,
  Wrench,
  AlertTriangle,
  History,
  TrendingUp,
  MoreVertical,
  Filter,
  BarChart3,
  Calendar,
  FileSearch,
  HardHat,
  ClipboardCheck,
  ChevronRight,
  Info,
  CheckCircle2
} from 'lucide-react';
import { 
  Chart as ChartJS, 
  ArcElement, 
  Tooltip, 
  Legend, 
  CategoryScale, 
  LinearScale, 
  BarElement,
  PointElement,
  LineElement,
  Title
} from 'chart.js';
import { Doughnut, Bar } from 'react-chartjs-2';

// Register ChartJS components for visual reporting
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Title);

const App = () => {
  // --- CORE STATE ---
  const [activeTab, setActiveTab] = useState('dashboard');
  const [searchQuery, setSearchQuery] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [notification, setNotification] = useState(null);

  // --- DATA STATE ---
  const [documents, setDocuments] = useState([
    { id: 1, docId: 'KR-SOP-MAN-001', name: 'CNC Lathe Operating Instructions', status: 'Approved', owner: 'Alex Rivera', date: '2023-10-15', department: 'Manufacturing', iso: 'ISO 9001' },
    { id: 2, docId: 'KR-POL-QUA-002', name: 'Quality Policy Manual', status: 'Approved', owner: 'Sarah Chen', date: '2023-08-22', department: 'Quality Assurance', iso: 'ISO 9001' },
    { id: 3, docId: 'KR-ENV-PRC-005', name: 'Hazardous Waste Storage', status: 'Approved', owner: 'Jordan Smith', date: '2023-11-02', department: 'Manufacturing', iso: 'ISO 14001' },
    { id: 4, docId: 'KR-SOP-ENG-004', name: 'Drafting Standards', status: 'Pending', owner: 'Mike Ross', date: '2023-12-01', department: 'Engineering', iso: 'ISO 9001' },
    { id: 5, docId: 'KR-SOP-HR-012', name: 'Onboarding Workflow', status: 'Pending', owner: 'Elena Gilbert', date: '2023-10-25', department: 'HR', iso: 'ISO 9001' },
  ]);

  const [calibrations, setCalibrations] = useState([
    { id: 'c1', name: 'CNC-4 Milling Center', calId: 'CAL-9921', due: '2024-04-10', status: 'Overdue' },
    { id: 'c2', name: 'Mitutoyo Caliper Set', calId: 'CAL-8842', due: '2024-12-05', status: 'Verified' },
    { id: 'c3', name: 'Instron Tensile Tester', calId: 'CAL-1102', due: '2024-05-15', status: 'Due Soon' }
  ]);

  const [training] = useState([
    { name: 'Sarah Miller', dept: 'Quality Assurance', score: 92, status: 'Compliant', certs: ['Lead Auditor', 'Six Sigma'] },
    { name: 'Robert Chen', dept: 'Manufacturing', score: 65, status: 'Incomplete', certs: ['Forklift'] },
    { name: 'Elena Rodriguez', dept: 'Engineering', score: 100, status: 'Compliant', certs: ['PE Cert'] }
  ]);

  const [auditLog, setAuditLog] = useState([
    { timestamp: new Date().toLocaleTimeString(), user: 'SYSTEM', action: 'System Initialization', ref: 'BOOT-001' },
    { timestamp: new Date().toLocaleTimeString(), user: 'J. Doe', action: 'Portal Accessed', ref: 'AUTH-202' },
  ]);

  const [capas] = useState([
    { id: 'CP-101', issue: 'Improper label adhesion', status: 'Open', priority: 'High', date: '2024-01-12' },
    { id: 'CP-102', issue: 'Calibration drift in Unit 4', status: 'Closed', priority: 'Medium', date: '2023-12-05' }
  ]);

  // --- ACTIONS ---
  const triggerNotification = (msg) => {
    setNotification(msg);
    setTimeout(() => setNotification(null), 3000);
  };

  const handleStatusChange = (id, newStatus) => {
    const doc = documents.find(d => d.id === id);
    setDocuments(prev => prev.map(f => f.id === id ? { ...f, status: newStatus } : f));
    setAuditLog(prev => [{ 
      timestamp: new Date().toLocaleTimeString(), 
      user: 'J. Doe', 
      action: `Status change to ${newStatus}`, 
      ref: doc?.docId || 'N/A' 
    }, ...prev]);
    triggerNotification(`Record ${doc?.docId} updated to ${newStatus}`);
  };

  const performCalibration = (id) => {
    setCalibrations(prev => prev.map(c => c.id === id ? { ...c, status: 'Verified', due: '2025-01-01' } : c));
    triggerNotification("Equipment recalibration logged successfully.");
  };

  // --- COMPUTED DATA ---
  const filteredFiles = useMemo(() => {
    return documents.filter(f => 
      f.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      f.docId.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [documents, searchQuery]);

  const stats = useMemo(() => {
    const pending = documents.filter(d => d.status === 'Pending').length;
    const isoCounts = documents.reduce((acc, d) => {
      acc[d.iso] = (acc[d.iso] || 0) + 1;
      return acc;
    }, {});
    return { pending, isoCounts, total: documents.length };
  }, [documents]);

  const doughnutData = {
    labels: ['ISO 9001', 'ISO 14001', 'ISO 45001'],
    datasets: [{
      data: [stats.isoCounts['ISO 9001'] || 0, stats.isoCounts['ISO 14001'] || 0, 0],
      backgroundColor: ['#4f46e5', '#10b981', '#f59e0b'],
      borderWidth: 0,
      cutout: '75%',
    }]
  };

  // --- UI COMPONENTS ---
  const StatusBadge = ({ status }) => {
    const styles = {
      Approved: 'bg-green-100 text-green-700 border-green-200',
      Pending: 'bg-amber-100 text-amber-700 border-amber-200',
      Rejected: 'bg-red-100 text-red-700 border-red-200',
      Verified: 'bg-blue-100 text-blue-700 border-blue-200',
      Overdue: 'bg-red-100 text-red-700 border-red-200',
      'Due Soon': 'bg-orange-100 text-orange-700 border-orange-200',
      Compliant: 'bg-green-100 text-green-700 border-green-200',
      Incomplete: 'bg-slate-100 text-slate-700 border-slate-200',
      Open: 'bg-rose-100 text-rose-700 border-rose-200',
      Closed: 'bg-slate-100 text-slate-700 border-slate-200',
    };
    return (
      <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider ${styles[status] || styles.Pending}`}>
        {status}
      </span>
    );
  };

  const SidebarItem = ({ icon: Icon, label, id }) => (
    <button
      onClick={() => setActiveTab(id)}
      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-2xl transition-all ${
        activeTab === id ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200 font-semibold' : 'text-slate-500 hover:bg-slate-100 hover:translate-x-1'
      }`}
    >
      <Icon size={18} />
      <span className="text-sm">{label}</span>
    </button>
  );

  return (
    <div className="flex h-screen bg-slate-50 font-sans text-slate-900 overflow-hidden relative">
      
      {/* Toast Notification */}
      {notification && (
        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] bg-slate-900 text-white px-6 py-3 rounded-2xl shadow-2xl flex items-center space-x-3 animate-in fade-in slide-in-from-bottom-4 duration-300">
          <CheckCircle2 size={18} className="text-green-400" />
          <span className="text-sm font-bold">{notification}</span>
        </div>
      )}

      {/* Sidebar */}
      <aside className="w-72 bg-white border-r border-slate-200 flex flex-col p-6 shrink-0">
        <div className="flex items-center space-x-4 mb-10 group cursor-pointer" onClick={() => setActiveTab('dashboard')}>
          <div className="bg-indigo-600 p-2.5 rounded-2xl shadow-indigo-200 shadow-xl group-hover:scale-110 transition-transform">
            <Shield className="text-white" size={24} />
          </div>
          <div>
            <h1 className="text-xl font-black tracking-tighter text-slate-800 uppercase">Kromet <span className="text-indigo-600">Enterprise</span></h1>
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Quality Management System</p>
          </div>
        </div>

        <nav className="flex-1 space-y-1 overflow-y-auto custom-scrollbar">
          <p className="px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Core Operations</p>
          <SidebarItem icon={Layout} label="Global Insights" id="dashboard" />
          <SidebarItem icon={FolderOpen} label="Document Vault" id="files" />
          <SidebarItem icon={FileCheck} label="Approval Workflow" id="approvals" />
          
          <p className="px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mt-8 mb-3">Compliance & Risk</p>
          <SidebarItem icon={Award} label="Competency Matrix" id="training" />
          <SidebarItem icon={Wrench} label="Equipment Health" id="calibration" />
          <SidebarItem icon={AlertTriangle} label="CAPA Registry" id="capa" />
          <SidebarItem icon={History} label="Audit Integrity" id="audit" />
        </nav>

        <div className="mt-auto p-4 bg-indigo-50 rounded-3xl border border-indigo-100 flex items-center space-x-3">
          <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white text-sm font-bold shadow-lg">JD</div>
          <div className="flex-1 min-w-0">
            <p className="text-xs font-black text-indigo-900 truncate">John Doe</p>
            <p className="text-[10px] text-indigo-500 font-bold uppercase tracking-tighter">System Admin</p>
          </div>
          <Settings size={16} className="text-indigo-400 cursor-pointer hover:rotate-90 transition-transform" />
        </div>
      </aside>

      {/* Main Container */}
      <main className="flex-1 flex flex-col overflow-hidden">
        
        {/* Universal Header */}
        <header className="h-24 bg-white border-b border-slate-200 flex items-center justify-between px-10 shrink-0">
          <div>
            <div className="flex items-center space-x-2 text-slate-400 mb-1">
              <span className="text-[10px] font-black uppercase tracking-widest">Workspace</span>
              <ChevronRight size={12} />
              <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600">{activeTab}</span>
            </div>
            <h2 className="text-2xl font-black text-slate-800 capitalize">{activeTab.replace('-', ' ')}</h2>
          </div>
          
          <div className="flex items-center space-x-6">
            <div className="relative group">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-600 transition-colors" size={18} />
              <input
                type="text"
                placeholder="Search ISO documentation..."
                className="pl-12 pr-6 py-3 bg-slate-100 border-2 border-transparent rounded-2xl text-sm font-medium focus:bg-white focus:border-indigo-500 w-80 transition-all outline-none"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex items-center space-x-2">
              <button className="p-3 text-slate-500 hover:bg-slate-100 rounded-2xl transition-all relative">
                <Bell size={20} />
                <span className="absolute top-3 right-3 w-2.5 h-2.5 bg-rose-500 rounded-full border-2 border-white"></span>
              </button>
              <button 
                onClick={() => setIsModalOpen(true)}
                className="flex items-center space-x-3 bg-slate-900 hover:bg-black text-white px-6 py-3 rounded-2xl text-xs font-bold transition-all shadow-xl shadow-slate-200"
              >
                <Plus size={18} />
                <span>NEW RECORD</span>
              </button>
            </div>
          </div>
        </header>

        {/* Dynamic Viewport */}
        <div className="flex-1 overflow-y-auto p-10 custom-scrollbar bg-slate-50/50">
          
          {activeTab === 'dashboard' && (
            <div className="max-w-7xl mx-auto space-y-10">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                {[
                  { label: 'Controlled Docs', value: stats.total, icon: FileText, color: 'text-indigo-600', bg: 'bg-indigo-50' },
                  { label: 'Pending Review', value: stats.pending, icon: Clock, color: 'text-amber-600', bg: 'bg-amber-50' },
                  { label: 'Equipment Health', value: '94%', icon: Wrench, color: 'text-emerald-600', bg: 'bg-emerald-50' },
                  { label: 'CAPA Closed', value: '88%', icon: Shield, color: 'text-blue-600', bg: 'bg-blue-50' },
                ].map((stat, i) => (
                  <div key={i} className="bg-white p-6 rounded-[32px] border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all">
                    <div className={`${stat.bg} ${stat.color} w-12 h-12 rounded-2xl flex items-center justify-center mb-6`}>
                      <stat.icon size={24} />
                    </div>
                    <p className="text-slate-400 text-[10px] font-black uppercase tracking-widest">{stat.label}</p>
                    <p className="text-3xl font-black mt-2 text-slate-800">{stat.value}</p>
                  </div>
                ))}
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
                <div className="lg:col-span-1 bg-white p-8 rounded-[40px] border border-slate-200 shadow-sm">
                  <h3 className="font-black text-slate-800 mb-8 flex justify-between items-center">
                    <span>Certification Pulse</span>
                    <Info size={16} className="text-slate-300" />
                  </h3>
                  <div className="aspect-square relative mb-8">
                    <Doughnut data={doughnutData} options={{ maintainAspectRatio: false, plugins: { legend: { display: false } } }} />
                    <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                      <span className="text-3xl font-black text-slate-800">{stats.total}</span>
                      <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Total Assets</span>
                    </div>
                  </div>
                  <div className="space-y-4">
                    {Object.entries(stats.isoCounts).map(([key, val]) => (
                      <div key={key} className="flex justify-between items-center p-3 bg-slate-50 rounded-2xl">
                        <div className="flex items-center space-x-3">
                          <div className={`w-3 h-3 rounded-full ${key.includes('9001') ? 'bg-indigo-500' : 'bg-emerald-500'}`}></div>
                          <span className="text-xs font-bold text-slate-600 uppercase tracking-tighter">{key}</span>
                        </div>
                        <span className="font-black text-slate-900 text-sm">{val}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="lg:col-span-2 bg-white rounded-[40px] border border-slate-200 shadow-sm overflow-hidden flex flex-col">
                  <div className="p-8 border-b border-slate-100 flex items-center justify-between">
                    <h3 className="font-black text-slate-800">Critical Review Queue</h3>
                    <button onClick={() => setActiveTab('approvals')} className="text-[10px] font-black text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-xl transition-colors tracking-widest">ACCESS WORKFLOW</button>
                  </div>
                  <div className="flex-1 overflow-y-auto divide-y divide-slate-50">
                    {documents.filter(d => d.status === 'Pending').map(doc => (
                      <div key={doc.id} className="p-6 hover:bg-slate-50 transition-all flex items-center justify-between group">
                        <div className="flex items-center space-x-6">
                          <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
                            <FileText size={24} />
                          </div>
                          <div>
                            <p className="font-black text-slate-800 mb-1">{doc.name}</p>
                            <div className="flex items-center space-x-3">
                              <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded uppercase">{doc.docId}</span>
                              <span className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Owner: {doc.owner}</span>
                            </div>
                          </div>
                        </div>
                        <div className="flex space-x-3">
                          <button onClick={() => handleStatusChange(doc.id, 'Approved')} className="p-3 text-emerald-600 hover:bg-emerald-50 border border-transparent hover:border-emerald-100 rounded-2xl transition-all">
                            <CheckCircle size={20} />
                          </button>
                          <button onClick={() => handleStatusChange(doc.id, 'Rejected')} className="p-3 text-rose-600 hover:bg-rose-50 border border-transparent hover:border-rose-100 rounded-2xl transition-all">
                            <XCircle size={20} />
                          </button>
                        </div>
                      </div>
                    ))}
                    {stats.pending === 0 && (
                      <div className="flex flex-col items-center justify-center p-20 text-slate-400 space-y-4">
                        <CheckCircle2 size={48} className="text-slate-200" />
                        <p className="text-sm font-bold tracking-tight uppercase">Queue Fully Cleared</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'files' && (
            <div className="bg-white rounded-[40px] border border-slate-200 shadow-sm overflow-hidden">
              <table className="w-full text-left">
                <thead className="bg-slate-50/50 text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] border-b border-slate-100">
                  <tr>
                    <th className="px-10 py-6">Reference No.</th>
                    <th className="px-10 py-6">Documentation Title</th>
                    <th className="px-10 py-6">ISO Compliance</th>
                    <th className="px-10 py-6">Department</th>
                    <th className="px-10 py-6">Status</th>
                    <th className="px-10 py-6 text-right">Custodian</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {filteredFiles.map(doc => (
                    <tr key={doc.id} className="hover:bg-slate-50 transition-colors group">
                      <td className="px-10 py-6 font-mono font-bold text-indigo-600 text-xs">{doc.docId}</td>
                      <td className="px-10 py-6">
                        <p className="text-sm font-black text-slate-800 mb-1">{doc.name}</p>
                        <p className="text-[10px] font-bold text-slate-400">Archived: {doc.date}</p>
                      </td>
                      <td className="px-10 py-6">
                        <div className="flex items-center space-x-2">
                          <span className="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
                          <span className="text-[10px] font-black text-slate-500 uppercase">{doc.iso}</span>
                        </div>
                      </td>
                      <td className="px-10 py-6 text-[10px] font-black text-slate-600 uppercase tracking-tight">{doc.department}</td>
                      <td className="px-10 py-6"><StatusBadge status={doc.status} /></td>
                      <td className="px-10 py-6 text-right text-xs font-black text-slate-700">{doc.owner}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {activeTab === 'approvals' && (
             <div className="bg-white rounded-[40px] border border-slate-200 shadow-sm overflow-hidden p-12 flex flex-col items-center justify-center text-center space-y-8">
                <div className="w-24 h-24 bg-indigo-600 text-white rounded-[32px] flex items-center justify-center shadow-2xl shadow-indigo-200 animate-bounce">
                  <FileCheck size={48} />
                </div>
                <div className="max-w-2xl space-y-4">
                  <h3 className="text-3xl font-black text-slate-800">Advanced Workflow Engine</h3>
                  <p className="text-slate-500 font-medium leading-relaxed">System-mandated sequential validation. Requires verification from Department Head and Quality Assurance Director before record finalization.</p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl">
                   {documents.filter(d => d.status === 'Pending').map(doc => (
                     <div key={doc.id} className="p-8 bg-slate-50 border-2 border-transparent hover:border-indigo-100 rounded-[32px] transition-all text-left group">
                        <div className="flex justify-between items-start mb-6">
                           <div className="p-3 bg-white rounded-2xl shadow-sm">
                             <FileCode size={24} className="text-indigo-600" />
                           </div>
                           <StatusBadge status="Pending" />
                        </div>
                        <h4 className="font-black text-slate-800 mb-2 leading-tight uppercase text-sm">{doc.name}</h4>
                        <p className="text-[10px] font-mono font-bold text-slate-400 mb-8">{doc.docId} • IN REVIEW</p>
                        <div className="flex space-x-3">
                           <button onClick={() => handleStatusChange(doc.id, 'Approved')} className="flex-1 py-3 bg-indigo-600 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100">AUTHORIZE</button>
                           <button onClick={() => handleStatusChange(doc.id, 'Rejected')} className="flex-1 py-3 bg-white border border-slate-200 text-rose-600 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-rose-50 transition-all">REJECT</button>
                        </div>
                     </div>
                   ))}
                </div>
             </div>
          )}

          {activeTab === 'calibration' && (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {calibrations.map((cal, i) => (
                 <div key={i} className={`bg-white p-8 rounded-[40px] border shadow-sm transition-all hover:shadow-xl border-l-[12px] ${cal.status === 'Overdue' ? 'border-l-rose-500' : 'border-l-indigo-500'}`}>
                    <div className="flex justify-between items-start mb-8">
                      <div className="p-3 bg-slate-50 rounded-2xl">
                        <Wrench size={24} className="text-slate-400" />
                      </div>
                      <StatusBadge status={cal.status} />
                    </div>
                    <h4 className="text-lg font-black text-slate-800 mb-1">{cal.name}</h4>
                    <p className="text-[10px] font-mono font-bold text-slate-400 mb-8 tracking-widest uppercase">{cal.calId}</p>
                    <div className="flex justify-between items-center border-t border-slate-100 pt-8">
                      <div>
                        <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Recalibration Due</p>
                        <p className={`text-sm font-black ${cal.status === 'Overdue' ? 'text-rose-600 animate-pulse' : 'text-slate-800'}`}>{cal.due}</p>
                      </div>
                      <button 
                        onClick={() => performCalibration(cal.id)}
                        className="text-[10px] font-black text-indigo-600 hover:bg-indigo-600 hover:text-white px-5 py-2.5 rounded-2xl border-2 border-indigo-100 transition-all uppercase tracking-tighter"
                      >
                        LOG SERVICE
                      </button>
                    </div>
                 </div>
               ))}
             </div>
          )}

          {activeTab === 'audit' && (
            <div className="bg-white p-10 rounded-[40px] border border-slate-200 shadow-sm">
              <div className="flex justify-between items-center mb-10 pb-6 border-b border-slate-100">
                <div>
                  <h3 className="text-xl font-black text-slate-800">Immutable Audit Trail</h3>
                  <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Cryptographically verified logs (Simulation)</p>
                </div>
                <button className="text-[10px] font-black bg-slate-900 text-white px-6 py-3 rounded-2xl uppercase tracking-[0.2em] hover:scale-105 transition-transform">EXPORT ENCRYPTED ARCHIVE</button>
              </div>
              <div className="space-y-4">
                {auditLog.map((log, i) => (
                  <div key={i} className="flex items-center space-x-6 p-5 rounded-[24px] hover:bg-slate-50 transition-all border border-transparent hover:border-slate-100">
                    <span className="text-[10px] font-mono font-bold text-slate-400 w-28 shrink-0">{log.timestamp}</span>
                    <div className="w-2 h-2 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(79,70,229,0.5)]"></div>
                    <span className="text-[10px] font-black text-slate-800 uppercase w-32 truncate tracking-widest">{log.user}</span>
                    <span className="text-sm font-bold text-slate-600 flex-1">{log.action}</span>
                    <span className="text-[10px] font-mono font-black text-indigo-600 bg-indigo-50 px-3 py-1 rounded-xl uppercase">{log.ref}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'training' && (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {training.map((person, i) => (
                  <div key={i} className="bg-white p-8 rounded-[40px] border border-slate-200 shadow-sm hover:border-indigo-400 transition-all group">
                    <div className="flex items-center space-x-4 mb-8">
                       <div className="w-14 h-14 bg-indigo-50 text-indigo-600 rounded-3xl flex items-center justify-center font-black text-xl shadow-inner">
                         {person.name.split(' ').map(n => n[0]).join('')}
                       </div>
                       <div>
                         <h4 className="font-black text-slate-800 uppercase text-sm">{person.name}</h4>
                         <p className="text-[10px] font-black text-slate-400 tracking-widest uppercase">{person.dept}</p>
                       </div>
                    </div>
                    <div className="space-y-6">
                       <div>
                         <div className="flex justify-between text-[10px] font-black mb-3 uppercase tracking-widest">
                           <span className="text-slate-400">Matrix Proficiency</span>
                           <span className="text-indigo-600">{person.score}%</span>
                         </div>
                         <div className="w-full bg-slate-100 h-3 rounded-full overflow-hidden shadow-inner">
                           <div className="bg-indigo-600 h-full rounded-full transition-all duration-1000 ease-out shadow-lg" style={{ width: `${person.score}%` }}></div>
                         </div>
                       </div>
                       <div className="flex flex-wrap gap-2">
                         {person.certs.map((c, j) => (
                           <div key={j} className="flex items-center space-x-1.5 bg-emerald-50 text-emerald-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-tight border border-emerald-100">
                             <CheckCircle2 size={10} />
                             <span>{c}</span>
                           </div>
                         ))}
                       </div>
                    </div>
                  </div>
                ))}
             </div>
          )}

          {activeTab === 'capa' && (
             <div className="grid grid-cols-1 gap-6 max-w-5xl mx-auto">
               {capas.map((capa) => (
                 <div key={capa.id} className="bg-white p-8 rounded-[32px] border border-slate-200 flex items-center justify-between shadow-sm">
                   <div className="flex items-center space-x-8">
                     <div className={`p-4 rounded-2xl ${capa.priority === 'High' ? 'bg-rose-50 text-rose-600' : 'bg-amber-50 text-amber-600'}`}>
                       <AlertTriangle size={32} />
                     </div>
                     <div>
                        <h4 className="text-lg font-black text-slate-800 uppercase">{capa.issue}</h4>
                        <div className="flex items-center space-x-4 mt-2">
                          <span className="text-[10px] font-mono font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded uppercase">{capa.id}</span>
                          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Initiated: {capa.date}</span>
                        </div>
                     </div>
                   </div>
                   <div className="flex items-center space-x-6">
                      <StatusBadge status={capa.status} />
                      <button className="p-3 text-slate-400 hover:text-slate-800 transition-colors">
                        <MoreVertical size={20} />
                      </button>
                   </div>
                 </div>
               ))}
             </div>
          )}

        </div>
      </main>

      {/* Modern Modal Overlay */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-md z-[200] flex items-center justify-center p-6 animate-in fade-in duration-300">
          <div className="bg-white rounded-[48px] w-full max-w-2xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
            <div className="p-12 bg-slate-900 text-white relative">
              <div className="absolute top-10 right-10">
                <Shield className="text-indigo-500 opacity-20" size={120} />
              </div>
              <h3 className="text-4xl font-black tracking-tighter mb-4 uppercase">Register Record</h3>
              <p className="text-slate-400 text-lg font-medium">Initiate formal ISO documentation workflow and department authorization.</p>
            </div>
            <div className="p-12 space-y-8">
              <div className="grid grid-cols-2 gap-8">
                <div className="space-y-2">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">Internal Index #</label>
                  <input type="text" placeholder="KR-SOP-XXXX" className="w-full p-5 bg-slate-100 border-2 border-transparent rounded-2xl text-sm font-bold focus:bg-white focus:border-indigo-500 transition-all outline-none" />
                </div>
                <div className="space-y-2">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">Compliance Level</label>
                  <select className="w-full p-5 bg-slate-100 border-2 border-transparent rounded-2xl text-sm font-bold focus:bg-white focus:border-indigo-500 transition-all outline-none">
                    <option>ISO 9001:2015</option>
                    <option>ISO 14001:2015</option>
                  </select>
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">Official Designation</label>
                <input type="text" placeholder="Title of the documentation" className="w-full p-5 bg-slate-100 border-2 border-transparent rounded-2xl text-sm font-bold focus:bg-white focus:border-indigo-500 transition-all outline-none" />
              </div>
              <div className="flex space-x-6 pt-6">
                <button onClick={() => setIsModalOpen(false)} className="flex-1 py-5 font-black text-slate-400 hover:text-slate-900 uppercase tracking-widest transition-colors">ABORT</button>
                <button onClick={() => { setIsModalOpen(false); triggerNotification("New record queued for review."); }} className="flex-[2] py-5 bg-indigo-600 text-white font-black rounded-3xl shadow-2xl shadow-indigo-200 hover:bg-indigo-700 transition-all uppercase tracking-[0.2em]">INITIATE WORKFLOW</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;