import React from 'react';
import { GenerationStep } from '../types';
import { Wand2, Download, FolderOpen, Settings } from 'lucide-react';
import PipelineVisualizer from './PipelineVisualizer';

interface HeaderProps {
  step: GenerationStep;
  setStep: (step: GenerationStep) => void;
  isAnalyzing: boolean;
  onSave: () => void;
  onLoadRef: React.RefObject<HTMLInputElement>;
  onLoad: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onOpenSettings: () => void;
}

const Header: React.FC<HeaderProps> = ({ 
  step, 
  setStep, 
  isAnalyzing, 
  onSave, 
  onLoadRef, 
  onLoad, 
  onOpenSettings 
}) => {
  return (
    <header className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-7xl">
      {/* Height increased to h-28 to prevent clipping of Visualizer labels */}
      <div className="glass-card rounded-2xl px-6 h-28 flex items-center justify-between shadow-2xl shadow-black/50 relative">
        
        {/* Logo */}
        <div 
            className="flex items-center gap-3 cursor-pointer group z-10 shrink-0" 
            onClick={() => setStep(GenerationStep.PROJECT_SELECTION)}
        >
          <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform">
            <Wand2 className="text-white w-5 h-5" />
          </div>
          <div className="hidden md:block">
            <h1 className="font-bold text-xl tracking-tight text-white group-hover:text-glow transition-all">
              Lumina <span className="font-light opacity-70">Studio</span>
            </h1>
            <p className="text-[10px] text-zinc-400 uppercase tracking-widest">AI 影視神經網絡流水線</p>
          </div>
        </div>
        
        {/* Pipeline Visualizer (The DAG) */}
        <div className="flex-1 px-8 hidden lg:block h-full">
          <PipelineVisualizer 
              currentStep={step} 
              onNavigate={(s) => setStep(s)}
              isProcessing={isAnalyzing}
          />
        </div>

        {/* Actions */}
        <div className="flex items-center gap-3 shrink-0 z-10">
           <button onClick={onSave} className="p-2.5 text-zinc-400 hover:text-green-400 hover:bg-white/5 rounded-full transition-all" title="匯出專案 (Zip)">
              <Download className="w-5 h-5" />
           </button>
           <button onClick={() => onLoadRef.current?.click()} className="p-2.5 text-zinc-400 hover:text-blue-400 hover:bg-white/5 rounded-full transition-all" title="匯入專案 (Zip)">
              <FolderOpen className="w-5 h-5" />
           </button>
           <input type="file" ref={onLoadRef} accept=".zip" className="hidden" onChange={onLoad} />
           <div className="w-px h-8 bg-white/10 mx-2" />
           <button onClick={onOpenSettings} className="p-2.5 text-zinc-400 hover:text-white hover:bg-white/5 rounded-full transition-all" title="設定">
              <Settings className="w-5 h-5" />
           </button>
        </div>
      </div>
    </header>
  );
};

export default Header;