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

export default function BeneficiosFuncionario() {
  const [beneficio, setBeneficio] = useState({
    funcionario: "",
    tipo: "",
    valor: "",
    observacoes: "",
  });

  const [beneficios, setBeneficios] = useState<any[]>([]);

  const handleAdicionar = () => {
    if (beneficio.funcionario && beneficio.tipo && beneficio.valor) {
      setBeneficios([...beneficios, beneficio]);
      setBeneficio({ funcionario: "", tipo: "", valor: "", observacoes: "" });
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Benefícios por Funcionário</h1>

      <Card className="mb-6">
        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
          <div>
            <Label>Funcionário</Label>
            <Input
              placeholder="Nome ou matrícula"
              value={beneficio.funcionario}
              onChange={(e) => setBeneficio({ ...beneficio, funcionario: e.target.value })}
            />
          </div>
          <div>
            <Label>Tipo de Benefício</Label>
            <Input
              placeholder="Vale-alimentação, plano de saúde..."
              value={beneficio.tipo}
              onChange={(e) => setBeneficio({ ...beneficio, tipo: e.target.value })}
            />
          </div>
          <div>
            <Label>Valor</Label>
            <Input
              type="number"
              placeholder="R$"
              value={beneficio.valor}
              onChange={(e) => setBeneficio({ ...beneficio, valor: e.target.value })}
            />
          </div>
          <div className="col-span-2">
            <Label>Observações</Label>
            <Textarea
              placeholder="Informações adicionais"
              value={beneficio.observacoes}
              onChange={(e) => setBeneficio({ ...beneficio, observacoes: e.target.value })}
            />
          </div>
          <div className="col-span-2">
            <Button onClick={handleAdicionar}>Adicionar Benefício</Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="pt-4">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Funcionário</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>Valor</TableHead>
                <TableHead>Observações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {beneficios.map((b, index) => (
                <TableRow key={index}>
                  <TableCell>{b.funcionario}</TableCell>
                  <TableCell>{b.tipo}</TableCell>
                  <TableCell>R$ {parseFloat(b.valor).toFixed(2)}</TableCell>
                  <TableCell>{b.observacoes}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
