import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import { Download, Printer } from "lucide-react";

export default function ResumoFolha() {
  const [periodo, setPeriodo] = useState("");

  // Simulação de dados
  const funcionarios = [
    {
      nome: "João da Silva",
      salarioBruto: 3200,
      horasExtras: 320,
      inss: 350,
      fgts: 256,
      pis: 80,
      outrosDescontos: 120,
      salarioLiquido: 2714,
    },
    {
      nome: "Maria Oliveira",
      salarioBruto: 2800,
      horasExtras: 200,
      inss: 310,
      fgts: 224,
      pis: 70,
      outrosDescontos: 100,
      salarioLiquido: 2296,
    },
  ];

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Resumo da Folha de Pagamento</h2>

      <div className="flex items-center gap-4 mb-4">
        <Input
          type="month"
          value={periodo}
          onChange={(e) => setPeriodo(e.target.value)}
          className="max-w-xs"
          placeholder="Selecionar período"
        />
        <Button variant="default" onClick={() => alert("Filtrar por período")}>
          Buscar
        </Button>
        <Button variant="outline">
          <Printer className="w-4 h-4 mr-2" /> Imprimir
        </Button>
        <Button variant="outline">
          <Download className="w-4 h-4 mr-2" /> Exportar PDF
        </Button>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Funcionário</TableHead>
            <TableHead>Salário Bruto</TableHead>
            <TableHead>Horas Extras</TableHead>
            <TableHead>INSS</TableHead>
            <TableHead>FGTS</TableHead>
            <TableHead>PIS</TableHead>
            <TableHead>Outros Descontos</TableHead>
            <TableHead>Salário Líquido</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {funcionarios.map((f, idx) => (
            <TableRow key={idx}>
              <TableCell>{f.nome}</TableCell>
              <TableCell>R$ {f.salarioBruto.toFixed(2)}</TableCell>
              <TableCell>R$ {f.horasExtras.toFixed(2)}</TableCell>
              <TableCell>R$ {f.inss.toFixed(2)}</TableCell>
              <TableCell>R$ {f.fgts.toFixed(2)}</TableCell>
              <TableCell>R$ {f.pis.toFixed(2)}</TableCell>
              <TableCell>R$ {f.outrosDescontos.toFixed(2)}</TableCell>
              <TableCell className="font-bold">R$ {f.salarioLiquido.toFixed(2)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
