// pages/rh/atestados.tsx
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { DatePicker } from "@/components/ui/datepicker";

export default function Atestados() {
  const [formData, setFormData] = useState({
    matricula: "",
    nome: "",
    dataAtestado: "",
    diasAfastado: "",
    motivo: "",
    observacoes: "",
    anexo: null as File | null,
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    setFormData(prev => ({ ...prev, anexo: file }));
  };

  const handleSubmit = () => {
    console.log("Atestado enviado:", formData);
    // Aqui vai lógica de envio para API
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Cadastro de Atestado Médico</h2>
      <Card>
        <CardContent className="grid gap-4 p-4">
          <div>
            <Label>Matrícula</Label>
            <Input name="matricula" value={formData.matricula} onChange={handleInputChange} />
          </div>
          <div>
            <Label>Nome do Funcionário</Label>
            <Input name="nome" value={formData.nome} onChange={handleInputChange} />
          </div>
          <div>
            <Label>Data do Atestado</Label>
            <DatePicker
              selected={formData.dataAtestado}
              onSelect={(date) => setFormData(prev => ({ ...prev, dataAtestado: date }))}
            />
          </div>
          <div>
            <Label>Dias de Afastamento</Label>
            <Input type="number" name="diasAfastado" value={formData.diasAfastado} onChange={handleInputChange} />
          </div>
          <div>
            <Label>Motivo</Label>
            <Input name="motivo" value={formData.motivo} onChange={handleInputChange} />
          </div>
          <div>
            <Label>Observações</Label>
            <Textarea name="observacoes" value={formData.observacoes} onChange={handleInputChange} />
          </div>
          <div>
            <Label>Anexar Arquivo (PDF ou imagem)</Label>
            <Input type="file" accept=".pdf,.jpg,.jpeg,.png" onChange={handleFileChange} />
          </div>
          <Button onClick={handleSubmit}>Salvar Atestado</Button>
        </CardContent>
      </Card>
    </div>
  );
}
