// pages/financeiro/folha_de_pagamento.tsx
import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select";

type Funcionario = {
  id: string;
  nome: string;
  salario_base: number;
  horas_extras: number;
  fgts: number;
  inss: number;
  pis: number;
  adicionais: number;
  descontos: number;
  conta_bancaria: string;
  status_pagamento: string;
};

const FolhaDePagamento = () => {
  const [funcionarios, setFuncionarios] = useState<Funcionario[]>([]);

  useEffect(() => {
    // Simulação de dados vindos do RH
    setFuncionarios([
      {
        id: "1",
        nome: "João da Silva",
        salario_base: 3000,
        horas_extras: 10,
        fgts: 240,
        inss: 330,
        pis: 30,
        adicionais: 250,
        descontos: 100,
        conta_bancaria: "Banco do Brasil - 12345-6",
        status_pagamento: "Pendente",
      },
    ]);
  }, []);

  const calcularPagamentoLiquido = (f: Funcionario) => {
    const valorHoraExtra = (f.salario_base / 220) * 1.5;
    const totalHoraExtra = valorHoraExtra * f.horas_extras;
    const totalDescontos = f.fgts + f.inss + f.pis + f.descontos;
    return f.salario_base + totalHoraExtra + f.adicionais - totalDescontos;
  };

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Folha de Pagamento</h1>
      {funcionarios.map((f) => (
        <Card key={f.id} className="shadow-lg rounded-2xl">
          <CardContent className="space-y-4">
            <h2 className="text-xl font-semibold">{f.nome}</h2>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div><Label>Salário Base:</Label> R$ {f.salario_base.toFixed(2)}</div>
              <div><Label>Horas Extras:</Label> {f.horas_extras}h</div>
              <div><Label>FGTS:</Label> R$ {f.fgts.toFixed(2)}</div>
              <div><Label>INSS:</Label> R$ {f.inss.toFixed(2)}</div>
              <div><Label>PIS:</Label> R$ {f.pis.toFixed(2)}</div>
              <div><Label>Adicionais:</Label> R$ {f.adicionais.toFixed(2)}</div>
              <div><Label>Outros Descontos:</Label> R$ {f.descontos.toFixed(2)}</div>
              <div><Label>Conta Bancária:</Label> {f.conta_bancaria}</div>
              <div><Label>Status Pagamento:</Label> {f.status_pagamento}</div>
            </div>
            <div className="text-right text-lg font-bold text-green-600">
              Líquido a Pagar: R$ {calcularPagamentoLiquido(f).toFixed(2)}
            </div>
            <div className="flex justify-end space-x-2">
              <Button variant="default">Marcar como Pago</Button>
              <Button variant="outline">Gerar Recibo PDF</Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

export default FolhaDePagamento;
