import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Download, Printer } from "lucide-react";

export default function DetalhamentoFolha() {
  const [funcionario, setFuncionario] = useState("João da Silva");
  const [mesAno, setMesAno] = useState("2024-03");

  // Dados simulados
  const detalhes = {
    salarioBase: 3200,
    horasExtras: 320,
    adicionalPericulosidade: 160,
    inss: 350,
    fgts: 256,
    pis: 80,
    valeTransporte: 150,
    descontoFaltas: 60,
    outrosDescontos: 120,
  };

  const totalProventos = detalhes.salarioBase + detalhes.horasExtras + detalhes.adicionalPericulosidade;
  const totalDescontos = detalhes.inss + detalhes.fgts + detalhes.pis + detalhes.valeTransporte + detalhes.descontoFaltas + detalhes.outrosDescontos;
  const salarioLiquido = totalProventos - totalDescontos;

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

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <Input type="text" placeholder="Funcionário" value={funcionario} onChange={(e) => setFuncionario(e.target.value)} />
        <Input type="month" value={mesAno} onChange={(e) => setMesAno(e.target.value)} />
      </div>

      <Card className="mb-4">
        <CardContent className="p-4 space-y-2">
          <h3 className="font-semibold text-lg">Proventos</h3>
          <div className="flex justify-between"><span>Salário Base:</span><span>R$ {detalhes.salarioBase.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>Horas Extras:</span><span>R$ {detalhes.horasExtras.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>Adicional de Periculosidade:</span><span>R$ {detalhes.adicionalPericulosidade.toFixed(2)}</span></div>
          <div className="flex justify-between font-semibold"><span>Total Proventos:</span><span>R$ {totalProventos.toFixed(2)}</span></div>
        </CardContent>
      </Card>

      <Card className="mb-4">
        <CardContent className="p-4 space-y-2">
          <h3 className="font-semibold text-lg">Descontos</h3>
          <div className="flex justify-between"><span>INSS:</span><span>R$ {detalhes.inss.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>FGTS:</span><span>R$ {detalhes.fgts.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>PIS:</span><span>R$ {detalhes.pis.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>Vale Transporte:</span><span>R$ {detalhes.valeTransporte.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>Faltas:</span><span>R$ {detalhes.descontoFaltas.toFixed(2)}</span></div>
          <div className="flex justify-between"><span>Outros Descontos:</span><span>R$ {detalhes.outrosDescontos.toFixed(2)}</span></div>
          <div className="flex justify-between font-semibold"><span>Total Descontos:</span><span>R$ {totalDescontos.toFixed(2)}</span></div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4 flex justify-between text-xl font-bold">
          <span>Salário Líquido:</span>
          <span className="text-green-600">R$ {salarioLiquido.toFixed(2)}</span>
        </CardContent>
      </Card>

      <div className="mt-6 flex gap-4">
        <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>
    </div>
  );
}
