import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

/**
 * Formulário para solicitações de RH (Férias, Ponto, etc).
 */
export const EmployeeForm = ({ initialData, onSubmit, onCancel }) => {
  const [formData, setFormData] = React.useState(
    initialData || { name: '', type: 'Férias', date: '', status: 'Pendente' }
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 pt-4">
      <div className="space-y-2">
        <Label htmlFor="name">Nome do Colaborador</Label>
        <Input 
          id="name" 
          value={formData.name} 
          onChange={(e) => setFormData({ ...formData, name: e.target.value })} 
          placeholder="Nome completo"
          required
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="type">Tipo de Solicitação</Label>
          <Select 
            value={formData.type} 
            onValueChange={(val) => setFormData({ ...formData, type: val })}
          >
            <SelectTrigger>
              <SelectValue placeholder="Selecione o tipo" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Férias">Férias</SelectItem>
              <SelectItem value="Ajuste de Ponto">Ajuste de Ponto</SelectItem>
              <SelectItem value="Reembolso">Reembolso</SelectItem>
              <SelectItem value="Afastamento">Afastamento</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="status">Status</Label>
          <Select 
            value={formData.status} 
            onValueChange={(val) => setFormData({ ...formData, status: val })}
          >
            <SelectTrigger>
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Pendente">Pendente</SelectItem>
              <SelectItem value="Aprovado">Aprovado</SelectItem>
              <SelectItem value="Recusado">Recusado</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="date">Período/Data</Label>
        <Input 
          id="date" 
          value={formData.date} 
          onChange={(e) => setFormData({ ...formData, date: e.target.value })} 
          placeholder="Ex: 15/05 a 30/05"
          required
        />
      </div>

      <div className="flex justify-end gap-3 pt-4 border-t">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancelar
        </Button>
        <Button type="submit" className="bg-emerald-600 hover:bg-emerald-700">
          {initialData ? 'Atualizar Solicitação' : 'Criar Solicitação'}
        </Button>
      </div>
    </form>
  );
};
