import React from 'react';
import { useDisplayMode } from '@/context/DisplayModeContext';
import { ArrowLeft, Save, Eye, EyeOff, Maximize2, Minimize2, MoreVertical } from 'lucide-react';
import StatusBadge from '@/components/StatusBadge';
import ClientSearchInput from '@/components/inputs/ClientSearchInput';
import RepresentativeSearchInput from '@/components/inputs/RepresentativeSearchInput';
import { Input } from '@/components/FormModal';
import { cn } from '@/lib/utils';
import PrimaryButton from '@/components/PrimaryButton';
import { useNavigate } from 'react-router-dom';

const DocumentHeader = ({ 
  documentNumber, 
  status, 
  client, 
  onClientChange, 
  onCreateClient,
  date, 
  onDateChange,
  dueDate,
  onDueDateChange,
  reference,
  onReferenceChange,
  representative,
  onRepresentativeChange,
  isEditMode,
  isNew,
  onSave,
  onCancel,
  onEdit,
  backPath,
  actions
}) => {
  const { displayMode, toggleDisplayMode, isPdfPreviewVisible, togglePdfPreview } = useDisplayMode();
  const navigate = useNavigate();
  const isCompact = displayMode === 'compact';

  return (
    <div className={cn(
      "bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 z-30 shadow-[0_1px_3px_rgba(0,0,0,0.05)] transition-all duration-300",
      "shrink-0", // Prevent header from shrinking in flex container
      isCompact ? "py-2" : "py-4"
    )}>
      <div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
          
          {/* Main Info Area - Optimized Grid/Flex */}
          <div className="flex flex-col gap-3 flex-1 w-full lg:w-auto min-w-0">
            
            {/* Row 1: Title & Primary Fields */}
            <div className="flex items-center gap-4 flex-wrap">
                {/* Back & Title */}
                <div className="flex items-center gap-3 shrink-0 mr-2">
                    <button onClick={() => navigate(backPath)} className="p-1.5 -ml-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors text-gray-500">
                        <ArrowLeft className="w-5 h-5" />
                    </button>
                    <div className="flex flex-col">
                        <div className="flex items-center gap-2">
                            <h1 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">{documentNumber}</h1>
                            <StatusBadge status={status} />
                        </div>
                    </div>
                </div>

                <div className="h-8 w-px bg-gray-200 dark:bg-gray-800 hidden sm:block mx-2" />

                {/* Client Field - Dominant */}
                <div className="flex-1 min-w-[250px] max-w-[400px]">
                    {isEditMode ? (
                         <div className="relative z-20">
                            <ClientSearchInput 
                                value={client} 
                                onChange={onClientChange} 
                                onClientSelect={onClientChange}
                                onCreateClient={onCreateClient}
                                placeholder="Client / Prospect..."
                            />
                         </div>
                    ) : (
                         <div className="flex flex-col">
                             <span className="text-xs text-gray-500 font-medium">Client</span>
                             <span className="font-semibold text-gray-900 dark:text-white truncate">
                                 {client ? (client.company || `${client.firstName} ${client.lastName}`) : '—'}
                             </span>
                         </div>
                    )}
                </div>

                {/* Date & Rep Fields - Compact */}
                <div className="flex gap-4 shrink-0">
                    <div className="w-[140px]">
                        {isEditMode ? (
                            <Input 
                                type="date" 
                                value={date} 
                                onChange={onDateChange} 
                                className="h-10 text-sm"
                            />
                        ) : (
                            <div className="flex flex-col">
                                <span className="text-xs text-gray-500 font-medium">Date</span>
                                <span className="text-sm text-gray-900 dark:text-white">{new Date(date).toLocaleDateString()}</span>
                            </div>
                        )}
                    </div>
                    <div className="w-[180px]">
                         {isEditMode ? (
                            <RepresentativeSearchInput 
                                value={representative} 
                                onChange={onRepresentativeChange}
                            />
                         ) : (
                            <div className="flex flex-col">
                                <span className="text-xs text-gray-500 font-medium">Commercial</span>
                                <span className="text-sm text-gray-900 dark:text-white truncate">
                                    {representative ? `${representative.firstName} ${representative.lastName}` : '—'}
                                </span>
                            </div>
                         )}
                    </div>
                </div>
            </div>

            {/* Row 2: Secondary Fields (Collapsible or always visible based on design) */}
            {isEditMode && (
                <div className="flex items-center gap-4 flex-wrap pt-1 animate-in fade-in slide-in-from-top-1">
                     <div className="w-[140px]">
                        <Input 
                            type="date" 
                            value={dueDate} 
                            onChange={onDueDateChange} 
                            placeholder="Échéance"
                            className="h-9 text-xs"
                            title="Date d'échéance"
                        />
                     </div>
                     <div className="w-[200px]">
                        <Input 
                            value={reference} 
                            onChange={onReferenceChange} 
                            placeholder="Votre référence..." 
                            className="h-9 text-xs"
                        />
                     </div>
                </div>
            )}
          </div>

          {/* Right Section: Actions & Controls */}
          <div className="flex items-center gap-3 shrink-0 ml-auto self-start lg:self-center mt-2 lg:mt-0">
             
             {/* View Controls */}
             <div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
                 <button 
                    onClick={toggleDisplayMode} 
                    className="p-1.5 hover:bg-white dark:hover:bg-gray-700 rounded-md transition-all text-gray-500"
                    title={isCompact ? "Mode confort" : "Mode compact"}
                 >
                    {isCompact ? <Maximize2 className="w-4 h-4" /> : <Minimize2 className="w-4 h-4" />}
                 </button>
                 <div className="w-px h-4 bg-gray-300 dark:bg-gray-700 mx-1" />
                 <button 
                    onClick={togglePdfPreview} 
                    className={cn(
                        "p-1.5 rounded-md transition-all",
                        isPdfPreviewVisible 
                            ? "bg-white dark:bg-gray-700 text-[#2A6F4F] shadow-sm" 
                            : "text-gray-500 hover:text-gray-900 hover:bg-white"
                    )}
                    title="Aperçu PDF"
                 >
                    {isPdfPreviewVisible ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
                 </button>
             </div>

             {/* Primary Actions */}
             {!isEditMode && !isNew ? (
                 <>
                    {actions}
                    <button 
                        onClick={onEdit}
                        className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors bg-white shadow-sm"
                    >
                        Modifier
                    </button>
                 </>
             ) : (
                <div className="flex items-center gap-2">
                    <button 
                        onClick={onCancel}
                        className="px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
                    >
                        Annuler
                    </button>
                    <PrimaryButton icon={Save} onClick={onSave}>
                        Enregistrer
                    </PrimaryButton>
                </div>
             )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DocumentHeader;