'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 level-0 p-6 lg:p-8 animate-in slide-in-from-bottom-20 duration-500">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h2 className="text-2xl font-normal tracking-tight">Audit History</h2>
          <p className="text-xs text-muted">Live transaction log from cloud</p>
        </div>
        <button 
          onClick={onClose}
          className="p-3 bg-surface-container-lowest border border-border text-secondary hover:text-white transition-colors"
        >
          <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-secondary gap-4">
             <History size={48} className="opacity-20" />
             <p>No transactions found</p>
          </div>
        ) : (
          logs.map((log) => (
            <div key={log.id} className="level-1 p-4 lg:p-5 flex items-center justify-between gap-4 transition-colors hover:border-muted">
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <p className={`text-xs font-normal ${
                    log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")
                  }`}>
                    {log.action}
                  </p>
                  <span className="text-xs font-normal text-muted">by</span>
                  <span className="text-xs font-normal text-secondary">{log.username || 'System'}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-normal text-secondary">
                     {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-secondary font-mono">
                      {new Date(log.timestamp).toLocaleString()}
                    </p>
                    {log.details && (
                      <span className="text-xs bg-surface-container-lowest text-muted px-2 py-0.5 border border-border font-mono">
                        {log.details}
                      </span>
                    )}
                  </div>
                )}
              </div>
              <div className="text-right">
                <p className={`text-lg font-normal ${
                  log.quantity_change > 0 ? "text-tertiary" : "text-error"
                }`}>
                  {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
                </p>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}