// pages/rh/cadastro_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 { Textarea } from "@/components/ui/textarea";

export default function CadastroFerias() {
  const [form, setForm] = useState({
    funcionario: "",
    dataInicio1: "",
    dataFim1: "",
    usarSegundoPeriodo: false,
    dataInicio2: "",
    dataFim2: "",
    observacoes: "",
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Cadastro de Férias</h1>
      <Card>
        <CardContent className="grid gap-4 pt-4">
          <div>
            <Label>Funcionário</Label>
            <Input
              type="text"
              value={form.funcionario}
              onChange={(e) =>
                setForm({ ...form, funcionario: e.target.value })
              }
              placeholder="Nome ou matrícula"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>Início do 1º Período</Label>
              <DatePicker
                selected={form.dataInicio1}
                onChange={(date) => setForm({ ...form, dataInicio1: date })}
              />
            </div>
            <div>
              <Label>Fim do 1º Período</Label>
              <DatePicker
                selected={form.dataFim1}
                onChange={(date) => setForm({ ...form, dataFim1: date })}
              />
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <input
              id="usarSegundoPeriodo"
              type="checkbox"
              checked={form.usarSegundoPeriodo}
              onChange={(e) =>
                setForm({ ...form, usarSegundoPeriodo: e.target.checked })
              }
            />
            <Label htmlFor="usarSegundoPeriodo">Usar segundo período?</Label>
          </div>
          {form.usarSegundoPeriodo && (
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Início do 2º Período</Label>
                <DatePicker
                  selected={form.dataInicio2}
                  onChange={(date) => setForm({ ...form, dataInicio2: date })}
                />
              </div>
              <div>
                <Label>Fim do 2º Período</Label>
                <DatePicker
                  selected={form.dataFim2}
                  onChange={(date) => setForm({ ...form, dataFim2: date })}
                />
              </div>
            </div>
          )}
          <div>
            <Label>Observações</Label>
            <Textarea
              value={form.observacoes}
              onChange={(e) =>
                setForm({ ...form, observacoes: e.target.value })
              }
              placeholder="Ex: Férias fracionadas por necessidade da empresa..."
            />
          </div>
          <div className="flex justify-end">
            <Button>Salvar Férias</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
