// pages/rh/cadastro_funcionario.tsx
import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";

export default function CadastroFuncionario() {
  const [foto, setFoto] = useState<File | null>(null);

  const handleFotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFoto(e.target.files[0]);
    }
  };

  return (
    <div className="p-6 max-w-5xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Cadastro de Funcionário</h2>

      <Tabs defaultValue="dados">
        <TabsList className="mb-4">
          <TabsTrigger value="dados">Dados Pessoais</TabsTrigger>
          <TabsTrigger value="documentos">Documentos</TabsTrigger>
          <TabsTrigger value="saude">Saúde</TabsTrigger>
          <TabsTrigger value="avaliacoes">Avaliações</TabsTrigger>
        </TabsList>

        <TabsContent value="dados">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input placeholder="Nome completo" />
            <Input placeholder="Cargo/Função" />
            <Input placeholder="Telefone" />
            <Input placeholder="Email" />
            <Input placeholder="Data de nascimento" type="date" />
            <Input placeholder="Número do PIS" />
            <div>
              <label className="block text-sm mb-1">Foto</label>
              <Input type="file" onChange={handleFotoChange} />
            </div>
          </div>
        </TabsContent>

        <TabsContent value="documentos">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input placeholder="CPF" />
            <Input placeholder="RG" />
            <Input placeholder="CNH (se aplicável)" />
            <Input placeholder="Título de Eleitor" />
            <Input placeholder="Carteira de Trabalho" />
            <Input placeholder="Reservista (se aplicável)" />
            <div>
              <label className="block text-sm mb-1">Cópias Digitalizadas</label>
              <Input type="file" multiple />
            </div>
          </div>
        </TabsContent>

        <TabsContent value="saude">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input placeholder="Data do último ASO" type="date" />
            <Textarea placeholder="Observações de saúde, restrições ou laudos" className="col-span-2" />
          </div>
        </TabsContent>

        <TabsContent value="avaliacoes">
          <Textarea placeholder="Histórico de avaliações de desempenho, advertências ou elogios" rows={6} />
        </TabsContent>
      </Tabs>

      <div className="mt-6 flex justify-end gap-4">
        <Button variant="secondary">Cancelar</Button>
        <Button variant="default">Cadastrar Funcionário</Button>
      </div>
    </div>
  );
}
