'use client';

import { X, History } from 'lucide-react';
import { cn } from '@/lib/utils'; // Assuming this exists or I'll use the local cn

interface LogsOverlayProps {
  show: boolean;
  onClose: () => void;
  logs: any[];
  inventory: any[];
}

export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOverlayProps) {
  if (!show) return null;

  return (
    <div className="fixed inset-0 z-50 flex flex-col bg-slate-950 p-6 animate-in slide-in-from-bottom-20 duration-500">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h2 className="text-2xl font-black tracking-tight">Audit History</h2>
          <p className="text-xs text-slate-500">Live transaction log from cloud</p>
        </div>
        <button 
          onClick={onClose}
          className="p-3 bg-slate-900 rounded-full text-slate-400"
        >
          <X size={24} />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
        {logs.length === 0 ? (
          <div className="h-full flex flex-col items-center justify-center text-slate-600 gap-4">
             <History size={48} className="opacity-20" />
             <p>No transactions found</p>
          </div>
        ) : (
          logs.map((log) => (
            <div key={log.id} className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <p className={`text-xs font-black ${
                    log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
                  }`}>
                    {log.action}
                  </p>
                  <span className="text-xs font-bold text-slate-500">by</span>
                  <span className="text-xs font-black text-slate-400">{log.username || 'System'}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-bold text-slate-200">
                     {inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
                  </span>
                </div>
                {(log.details || log.timestamp) && (
                  <div className="flex items-center gap-3 mt-2">
                     <p className="text-xs text-slate-600 font-mono">
                      {new Date(log.timestamp).toLocaleString()}
                    </p>
                    {log.details && (
                      <span className="text-xs bg-slate-800 text-slate-500 px-2 py-0.5 rounded border border-slate-700 font-mono">
                        {log.details}
                      </span>
                    )}
                  </div>
                )}
              </div>
              <div className="text-right">
                <p className={`text-lg font-black ${
                  log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
                }`}>
                  {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
                </p>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}