import { X } from 'lucide-react';
import ROForm from '../ROForm';
import type { RepairOrder } from '../../types';
import type { CustomerWithVehicles } from '../../pages/Customers';

export function ROModal({
  isOpen,
  onClose,
  onSave,
  editRO,
  existingRoNumbers,
  settings,
  customers,
}: {
  isOpen: boolean;
  onClose: () => void;
  onSave: (data: Partial<RepairOrder>) => void;
  editRO: RepairOrder | null;
  existingRoNumbers: Set<string>;
  settings: { taxRate: number; shopChargeRate: number; shopChargeCap: number; defaultLaborRate: number };
  customers?: CustomerWithVehicles[];
}) {
  if (!isOpen) return null;

  const isEditing = !!editRO;

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-10">
      <div className="w-full max-w-3xl rounded-2xl bg-white shadow-2xl dark:bg-gray-900">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
          <div>
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
              {isEditing ? 'Edit Repair Order' : 'Create Repair Order'}
            </h2>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {isEditing
                ? `Editing RO #${editRO?.roNumber || ''}`
                : 'Enter customer and vehicle information'}
            </p>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Body */}
        <div className="px-6 py-5">
          <ROForm
            editRO={editRO}
            existingRoNumbers={existingRoNumbers}
            settings={settings}
            customers={customers}
            onSave={(data) => { onSave(data); onClose(); }}
            onCancel={onClose}
          />
        </div>
      </div>
    </div>
  );
}