// pages/rh/consulta_ferias.tsx
import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/ui/datepicker";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export default function ConsultaFerias() {
  const [filtro, setFiltro] = useState({
    funcionario: "",
    dataInicio: "",
    dataFim: "",
  });

  // Simulação de dados (substituir com dados reais do backend)
  const ferias = [
    {
      funcionario: "Ana Souza",
      dataInicio1: "2025-07-01",
      dataFim1: "2025-07-15",
      dataInicio2: "2025-12-01",
      dataFim2: "2025-12-15",
    },
    {
      funcionario: "Carlos Oliveira",
      dataInicio1: "2025-08-01",
      dataFim1: "2025-08-30",
    },
  ];

  const feriasFiltradas = ferias.filter((f) => {
    const nomeOk = f.funcionario.toLowerCase().includes(filtro.funcionario.toLowerCase());
    const dataInicioOk = !filtro.dataInicio || new Date(f.dataInicio1) >= new Date(filtro.dataInicio);
    const dataFimOk = !filtro.dataFim || new Date(f.dataFim1) <= new Date(filtro.dataFim);
    return nomeOk && dataInicioOk && dataFimOk;
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Consulta de Férias</h1>
      <Card className="mb-6">
        <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4">
          <div>
            <Label>Funcionário</Label>
            <Input
              type="text"
              value={filtro.funcionario}
              onChange={(e) => setFiltro({ ...filtro, funcionario: e.target.value })}
              placeholder="Nome ou matrícula"
            />
          </div>
          <div>
            <Label>Data Inicial</Label>
            <DatePicker
              selected={filtro.dataInicio}
              onChange={(date) => setFiltro({ ...filtro, dataInicio: date })}
            />
          </div>
          <div>
            <Label>Data Final</Label>
            <DatePicker
              selected={filtro.dataFim}
              onChange={(date) => setFiltro({ ...filtro, dataFim: date })}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Funcionário</TableHead>
                <TableHead>1º Período</TableHead>
                <TableHead>2º Período</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {feriasFiltradas.map((feria, index) => (
                <TableRow key={index}>
                  <TableCell>{feria.funcionario}</TableCell>
                  <TableCell>{feria.dataInicio1} a {feria.dataFim1}</TableCell>
                  <TableCell>
                    {feria.dataInicio2 ? `${feria.dataInicio2} a ${feria.dataFim2}` : "-"}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
