import React from 'react';
import { HiX, HiClock, HiUser, HiTerminal, HiDesktopComputer, HiInformationCircle } from 'react-icons/hi';

export interface User {
  id_user: string;
  username: string;
}

export interface LogItem {
  id_log: number;
  id_user: string | null;
  user: User | null;
  action: string;
  description: string;
  ip_address: string | null;
  created_at: string;
  payload?: any; // Opsional jika backend mengirimkan atribut payload/metadata tambahan
}

interface PopupDetailLogProps {
  log: LogItem;
  onClose: () => void;
}

export default function PopupDetailLog({ log, onClose }: PopupDetailLogProps) {
  // Helper penentu style badge warna action (sesuai kriteria tema dark)
  const getActionBadgeClass = (actionName: string) => {
    if (!actionName) return 'bg-gray-800 text-gray-300 border-gray-700';
    const act = actionName.toUpperCase();
    if (act.includes('LOGIN') || act.includes('CREATE'))
      return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
    if (act.includes('UPDATE') || act.includes('EDIT'))
      return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
    if (act.includes('DELETE') || act.includes('LOGOUT'))
      return 'bg-rose-500/10 text-rose-400 border-rose-500/20';
    return 'bg-blue-500/10 text-blue-400 border-blue-500/20';
  };

  // Helper format tanggal Indonesia
  const formatDate = (dateString: string) => {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleString('id-ID', {
      day: '2-digit',
      month: 'long',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-xs animate-in fade-in duration-150">
      <div className="relative w-full max-w-2xl bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col text-xs text-gray-200">
        
        {/* Header Modal */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800 bg-gray-950/60 shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="p-2 bg-blue-500/10 text-blue-400 border border-blue-500/20 rounded-xl">
              <HiTerminal className="w-5 h-5" />
            </div>
            <div>
              <h3 className="text-sm font-bold text-gray-100">Detail Log Aktivitas System</h3>
              <p className="text-[11px] font-mono text-gray-400 mt-0.5">ID Log: #{log.id_log}</p>
            </div>
          </div>

          <button
            type="button"
            onClick={onClose}
            className="p-1.5 text-gray-400 hover:text-white bg-gray-800 hover:bg-gray-700 rounded-xl transition cursor-pointer"
          >
            <HiX className="w-5 h-5" />
          </button>
        </div>

        {/* Content Body (Scrollable) */}
        <div className="p-6 overflow-y-auto space-y-5">
          
          {/* Metadata Cards Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            
            {/* Waktu Eksekusi */}
            <div className="p-3.5 bg-gray-950 border border-gray-800/80 rounded-xl space-y-1">
              <span className="text-gray-400 text-[10px] uppercase font-bold flex items-center gap-1.5">
                <HiClock className="w-3.5 h-3.5 text-gray-500" />
                Waktu
              </span>
              <p className="font-mono font-semibold text-gray-200 pt-0.5">
                {formatDate(log.created_at)}
              </p>
            </div>

            {/* Pengguna / User */}
            <div className="p-3.5 bg-gray-950 border border-gray-800/80 rounded-xl space-y-1">
              <span className="text-gray-400 text-[10px] uppercase font-bold flex items-center gap-1.5">
                <HiUser className="w-3.5 h-3.5 text-gray-500" />
                Pengguna (User)
              </span>
              <p className="font-semibold text-gray-200 pt-0.5">
                {log.user ? (
                  <span>{log.user.username} <span className="text-gray-500 text-[10px] font-mono">({log.id_user})</span></span>
                ) : (
                  <span className="text-gray-500 italic">Sistem / Account Terhapus</span>
                )}
              </p>
            </div>

            {/* Action Type */}
            <div className="p-3.5 bg-gray-950 border border-gray-800/80 rounded-xl space-y-1">
              <span className="text-gray-400 text-[10px] uppercase font-bold block">Tipe Aktivitas</span>
              <div className="pt-0.5">
                <span className={`px-2.5 py-1 rounded-md text-[10px] font-bold uppercase border inline-block ${getActionBadgeClass(log.action)}`}>
                  {log.action || '-'}
                </span>
              </div>
            </div>

            {/* IP Address */}
            <div className="p-3.5 bg-gray-950 border border-gray-800/80 rounded-xl space-y-1">
              <span className="text-gray-400 text-[10px] uppercase font-bold flex items-center gap-1.5">
                <HiDesktopComputer className="w-3.5 h-3.5 text-gray-500" />
                Alamat IP (IP Address)
              </span>
              <p className="font-mono font-bold text-gray-300 pt-0.5">
                {log.ip_address || '127.0.0.1'}
              </p>
            </div>

          </div>

          {/* Deskripsi Lengkap */}
          <div className="space-y-1.5">
            <span className="text-gray-400 text-[10px] uppercase font-bold flex items-center gap-1.5">
              <HiInformationCircle className="w-4 h-4 text-blue-400" />
              Deskripsi Aktivitas
            </span>
            <div className="p-4 bg-gray-950 border border-gray-800 rounded-xl text-gray-300 leading-relaxed font-sans wrap-break-word">
              {log.description || <span className="text-gray-500 italic">Tidak ada deskripsi rinci.</span>}
            </div>
          </div>

          {/* Payload JSON (Jika Tersedia) */}
          {log.payload && (
            <div className="space-y-1.5">
              <span className="text-gray-400 text-[10px] uppercase font-bold block">
                Rincian Payload Data
              </span>
              <pre className="p-4 bg-gray-950 border border-gray-800 rounded-xl text-[11px] font-mono text-emerald-400 overflow-x-auto max-h-60">
                {JSON.stringify(log.payload, null, 2)}
              </pre>
            </div>
          )}

        </div>

        {/* Footer Modal */}
        <div className="p-4 bg-gray-950/80 border-t border-gray-800 flex items-center justify-end shrink-0">
          <button
            type="button"
            onClick={onClose}
            className="px-5 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 font-semibold text-xs rounded-xl transition cursor-pointer"
          >
            Tutup
          </button>
        </div>

      </div>
    </div>
  );
}