import React from 'react';
import FormModal, { FormSection, FormField, Input, Select, Textarea } from '@/components/FormModal';
import { z } from 'zod';
import { toast } from '@/components/ui/use-toast';

const ProductFamilyFormModal = ({ isOpen, onClose, initialData, onSubmit }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Simulate form submission
    setTimeout(() => {
      if (onSubmit) {
        onSubmit(initialData ? { ...initialData } : { id: Math.random() });
      }
      onClose();
      toast({ 
        title: initialData ? "Famille modifiée" : "Famille créée", 
        description: "Les informations ont été enregistrées avec succès.",
        variant: "success"
      });
    }, 500);
  };

  return (
    <FormModal
      isOpen={isOpen}
      onClose={onClose}
      title={initialData ? `Modifier ${initialData.name}` : "Nouvelle famille d'articles"}
      onSubmit={handleSubmit}
      size="lg"
    >
      <FormSection title="Informations générales" description="Identification de la famille">
        <FormField label="Code famille" required>
          <Input defaultValue={initialData?.code} placeholder="EX: FAM-001" />
        </FormField>
        <FormField label="Intitulé" required>
          <Input defaultValue={initialData?.name} placeholder="Ex: Ordinateurs" />
        </FormField>
        <FormField label="Catégorie">
          <Select defaultValue={initialData?.category || 'produit'}>
            <option value="produit">Produit Stocké</option>
            <option value="service">Service</option>
            <option value="consommable">Consommable</option>
          </Select>
        </FormField>
        <FormField label="Couleur (Tag)">
          <Select defaultValue={initialData?.color || 'bg-blue-100 text-blue-800'}>
            <option value="bg-blue-100 text-blue-800">Bleu</option>
            <option value="bg-green-100 text-green-800">Vert</option>
            <option value="bg-purple-100 text-purple-800">Violet</option>
            <option value="bg-orange-100 text-orange-800">Orange</option>
            <option value="bg-gray-100 text-gray-800">Gris</option>
            <option value="bg-red-100 text-red-800">Rouge</option>
          </Select>
        </FormField>
        <FormField label="Description" fullWidth>
          <Textarea rows={3} defaultValue={initialData?.description} placeholder="Description interne..." />
        </FormField>
      </FormSection>

      <FormSection title="Règles par défaut" description="Appliquées aux nouveaux articles">
        <FormField label="Taux TVA par défaut">
          <Select defaultValue="20">
            <option value="20">20%</option>
            <option value="10">10%</option>
            <option value="5.5">5.5%</option>
            <option value="0">0%</option>
          </Select>
        </FormField>
        <FormField label="Compte comptable vente">
          <Input placeholder="707..." />
        </FormField>
        <FormField label="Compte comptable achat">
          <Input placeholder="607..." />
        </FormField>
        <FormField label="Unité par défaut">
          <Select defaultValue="pcs">
            <option value="pcs">Pièce</option>
            <option value="h">Heure</option>
            <option value="kg">Kg</option>
            <option value="l">Litre</option>
            <option value="m">Mètre</option>
          </Select>
        </FormField>
      </FormSection>
    </FormModal>
  );
};

export default ProductFamilyFormModal;