Craze-Data-check/src/components/TopBar.tsx

import React from 'react';
import { Download, Database, LogOut, Undo2 } from 'lucide-react';

interface TopBarProps {
  stats: any;
  onExport: () => void;
  hasData: boolean;
  hasUnsavedChanges: boolean;
  userEmail?: string;
  onSignOut?: () => void;
  canUndo: boolean;
  onUndo: () => void;
  undoMessage?: string;
  undoSteps: number;
}

export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage, undoSteps }: TopBarProps) {
  return (
    <header className="bg-[#020812] border-b border-slate-700/30 h-32 flex items-center justify-between px-10 shrink-0 z-10 shadow-2xl">
      <div className="flex items-center -ml-4">
        <img 
          src="/logo.png" 
          alt="Craze Scan" 
          className="h-24 w-auto object-contain filter brightness-110 contrast-125 hover:scale-105 transition-transform duration-300"
        />
      </div>

      {stats && (
        <div className="flex items-center gap-4 text-xs font-medium">
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Total</span>
            <span className="bg-slate-700 text-white px-2 py-0.5 rounded mt-1">{stats.total}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing DE Long</span>
            <span className="bg-red-500/20 text-red-400 px-2 py-0.5 rounded border border-red-500/30 mt-1">{stats.missingDeLong}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing EN Long</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnLong}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing DE Short</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingDeShort}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing EN Short</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnShort}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Fully Complete</span>
            <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded border border-green-500/30 mt-1">{stats.fullyComplete}</span>
          </div>
        </div>
      )}

      <div className="flex items-center gap-3">
        {hasData && (
          <button
            onClick={onExport}
            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              hasUnsavedChanges
                ? 'bg-blue-600 hover:bg-blue-700 text-white'
                : 'bg-slate-700 hover:bg-slate-600 text-slate-200'
            }`}
          >
            <Download className="w-4 h-4" />
            Export Updated Excel
            {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
          </button>
        )}
        
        {canUndo && (
          <button
            onClick={onUndo}
            title={`Undo: ${undoMessage}`}
            className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md text-sm font-bold transition-all shadow-lg shadow-amber-900/40 animate-in fade-in zoom-in duration-300 relative group"
          >
            <Undo2 className="w-4 h-4" />
            BACK / UNDO
            {undoSteps > 1 && (
              <span className="absolute -top-1 -right-1 bg-white text-amber-700 text-[10px] w-4 h-4 rounded-full flex items-center justify-center shadow-md">
                {undoSteps}
              </span>
            )}
          </button>
        )}

        {userEmail && (
          <div className="flex items-center gap-2 border-l border-slate-700 pl-3">
            <span className="text-xs text-slate-400">{userEmail}</span>
            <button
              onClick={onSignOut}
              title="Sign out"
              className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
            >
              <LogOut className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
    </header>
  );
}