'use client';

import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';

export default function CadastroFuncionario() {
  const [foto, setFoto] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const handleFotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setFoto(file);
      const reader = new FileReader();
      reader.onloadend = () => setPreview(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Aqui você pode montar um FormData para enviar com a foto
    setTimeout(() => setLoading(false), 1000);
  };

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">Cadastro de Funcionário</h1>
      <form onSubmit={handleSubmit} className="space-y-6">
        <Card>
          <CardContent className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <Label>Nome completo</Label>
              <Input placeholder="Ex: João da Silva" required />
            </div>
            <div>
              <Label>Cargo</Label>
              <Input placeholder="Motorista, Administrativo, etc" required />
            </div>
            <div>
              <Label>Telefone</Label>
              <Input placeholder="(11) 91234-5678" />
            </div>
            <div>
              <Label>Status</Label>
              <Select defaultValue="ativo">
                <SelectTrigger>
                  <SelectValue placeholder="Selecione o status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ativo">Ativo</SelectItem>
                  <SelectItem value="ferias">Férias</SelectItem>
                  <SelectItem value="afastado">Afastado</SelectItem>
                  <SelectItem value="inativo">Inativo</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>Salário (R$)</Label>
              <Input type="number" placeholder="Ex: 2500.00" step="0.01" />
            </div>
            <div className="flex flex-col gap-2">
              <Label>Foto do Funcionário</Label>
              <Input type="file" accept="image/*" onChange={handleFotoChange} />
              {preview && (
                <img
                  src={preview}
                  alt="Preview da foto"
                  className="w-32 h-32 rounded-full object-cover mt-2 shadow-md border"
                />
              )}
            </div>
            <div className="md:col-span-2">
              <Label>Observações</Label>
              <Textarea placeholder="Informações adicionais (ex: CNH vencida em junho, motorista de apoio etc.)" />
            </div>
          </CardContent>
        </Card>

        <Button type="submit" disabled={loading}>
          {loading ? 'Salvando...' : 'Cadastrar Funcionário'}
        </Button>
      </form>
    </div>
  );
}
