const logs = [
  {
    timestamp: "2024-05-20 14:22:01.442",
    level: "ERROR",
    agentId: "AX-982_CORE",
    payload: { text: "Unauthorized handshake from peer", ip: "[192.168.1.104].", json: '{"action": "TERMINATE_SESSION"}' },
    icon: "dangerous",
    statusClass: "status-strip-error",
    levelClass: "bg-red-500/10 text-[#ee7d77] border-[#ee7d77]/20 shadow-[0_0_5px_rgba(238,125,119,0.2)]"
  },
  {
    timestamp: "2024-05-20 14:21:58.112",
    level: "INFO",
    agentId: "SYS_MONITOR",
    payload: { text: "Key rotation complete. Nodes synced.", ip: "", json: '{"latency": "12ms", "status": "nominal"}' },
    icon: "info",
    statusClass: "status-strip-info",
    levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
  },
  {
    timestamp: "2024-05-20 14:21:45.890",
    level: "SUCCESS",
    agentId: "SCAN_AGENT_04",
    payload: { text: "Quantum hash verification PASSED.", ip: "", json: '{"sector": "7B", "integrity": 1.0}' },
    icon: "check_circle",
    statusClass: "status-strip-success",
    levelClass: "bg-cyan-500/10 text-[#00daf3] border-[#00daf3]/20"
  },
  {
    timestamp: "2024-05-20 14:21:12.001",
    level: "WARN",
    agentId: "THERMAL_REG",
    payload: { text: "Blade rack 4 temp high.", ip: "", json: '{"temp": "72°C", "limit": "70°C"}' },
    icon: "report_problem",
    statusClass: "status-strip-warning",
    levelClass: "bg-amber-500/10 text-[#ffb300] border-[#ffb300]/20"
  },
  {
    timestamp: "2024-05-20 14:20:55.223",
    level: "INFO",
    agentId: "USER_AUTH",
    payload: { text: "Admin login sequence initiated.", ip: "", json: '{"terminal": "ST-09", "auth": "biometric"}' },
    icon: "verified_user",
    statusClass: "status-strip-info",
    levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
  }
];

export default function LogTable() {
  return (
    <div className="glass rounded-xl border neon-border flex flex-col min-h-0 flex-1 overflow-hidden animate-fade-in-up delay-100">
      {/* Table Header / Controls */}
      <div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/40 backdrop-blur-md z-10 w-full shrink-0">
        <div className="flex gap-2">
          <button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
            <span className="material-symbols-outlined text-sm">filter_alt</span>
            Filter
          </button>
          <button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
            <span className="material-symbols-outlined text-sm">sort</span>
            Sort
          </button>
        </div>
        <div className="flex gap-4 items-center">
          <div className="relative">
            <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">search</span>
            <input type="text" placeholder="Search logs..." className="h-8 pl-9 pr-4 rounded-md bg-black/50 border border-white/10 text-xs font-mono-data text-zinc-300 placeholder-zinc-600 focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/50 w-64 transition-all" />
          </div>
          <button className="h-8 px-4 rounded-md bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 text-xs font-bold tracking-widest uppercase transition-all flex items-center gap-2 btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] hover:shadow-[0_0_15px_rgba(167,139,250,0.4)]">
            <span className="material-symbols-outlined text-sm">download</span>
            Export PDF
          </button>
        </div>
      </div>

      {/* Log Table Body */}
      <div className="flex-1 h-0 overflow-y-auto custom-scrollbar relative z-10">
        <table className="w-full text-left border-collapse">
          <thead className="sticky top-0 bg-black/80 backdrop-blur-md z-20 border-b border-white/5">
            <tr>
              <th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-48" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Timestamp</th>
              <th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-24" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Level</th>
              <th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-32" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Agent ID</th>
              <th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Message Payload</th>
              <th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-20 text-right" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Status</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-white/5">
            {logs.map((log, idx) => (
              <tr key={idx} className={`hover:bg-[#a88cfb]/10 transition-all duration-200 group ${log.statusClass}`}>
                <td className="px-6 py-3 font-mono-data text-[11px] syntax-timestamp whitespace-nowrap">{log.timestamp}</td>
                <td className="px-4 py-3 whitespace-nowrap">
                  <span className={`text-[9px] font-mono-data px-2 py-0.5 rounded border font-bold ${log.levelClass}`}>
                    {log.level}
                  </span>
                </td>
                <td className="px-4 py-3 font-mono-data text-[11px] syntax-agent whitespace-nowrap">{log.agentId}</td>
                <td className="px-6 py-3 font-mono-data text-[11px] truncate max-w-[300px]">
                  <span className="syntax-string mr-2 opacity-90">{log.payload.text}</span>
                  {log.payload.ip && <span className="syntax-ip mr-2" style={{ color: "#00daf3" }}>{log.payload.ip}</span>}
                  <span className="syntax-key opacity-60 text-xs">{log.payload.json}</span>
                </td>
                <td className="px-6 py-3 text-right whitespace-nowrap">
                  <span className={`material-symbols-outlined text-[16px] drop-shadow-lg ${log.level === 'ERROR' ? 'text-[#ee7d77]' : log.level === 'SUCCESS' ? 'text-[#00daf3]' : log.level === 'WARN' ? 'text-[#ffb300]' : 'text-[#a88cfb]'}`}>
                    {log.icon}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Footer Log Stats */}
      <div className="px-6 py-3 border-t border-white/5 flex items-center justify-between text-[10px] font-mono-data text-zinc-500 relative z-10 bg-black/60 backdrop-blur-xl">
        <div className="flex items-center gap-4">
          <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full animate-pulse shadow-[0_0_8px_#a88cfb]" style={{ backgroundColor: "#a88cfb" }}></span> LIVE RECAPITULATION</span>
          <span>|</span>
          <span>Showing {logs.length} events of 44,901</span>
        </div>
        <div className="flex items-center gap-4">
          <span>PAGE 1 OF 3,741</span>
          <div className="flex gap-1">
            <button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
              <span className="material-symbols-outlined text-sm">chevron_left</span>
            </button>
            <button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
              <span className="material-symbols-outlined text-sm">chevron_right</span>
            </button>
          </div>
        </div>
      </div>
      </div>
  );
}