/**
 * Dashboard头部组件
 */
import { useRef } from 'react';
import { BrainCircuit, UploadCloud } from 'lucide-react';

interface HeaderProps {
  onUpload: (files: FileList) => void;
}

export default function Header({ onUpload }: HeaderProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onUpload(e.target.files);
      // 重置input以允许选择相同文件
      e.target.value = '';
    }
  };

  return (
    <div className="flex justify-between items-center mb-6">
      {/* Logo区域 */}
      <div className="flex items-center gap-3">
        <div className="bg-indigo-50 p-2 rounded-lg text-indigo-700">
          <BrainCircuit className="w-6 h-6" />
        </div>
        <div>
          <h1 className="text-xl font-bold text-slate-800">智能审稿系统</h1>
          <p className="text-xs text-slate-500">当前工作区：编辑部初审组</p>
        </div>
      </div>
      
      {/* 上传按钮 */}
      <div className="flex gap-3">
        <input 
          ref={fileInputRef}
          type="file" 
          multiple 
          accept=".pdf,.doc,.docx"
          className="hidden"
          onChange={handleFileChange}
        />
        <button 
          onClick={() => fileInputRef.current?.click()}
          className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-bold flex items-center gap-2 shadow-sm transition-all hover:-translate-y-0.5"
        >
          <UploadCloud className="w-4 h-4" />
          上传新稿件
        </button>
      </div>
    </div>
  );
}