import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { CalendarDays, Users, AlertCircle, BarChart2, FileText, PlusCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { month: 'Jan', folha: 35000 },
  { month: 'Fev', folha: 37000 },
  { month: 'Mar', folha: 36000 },
  { month: 'Abr', folha: 39000 },
];

export default function RhDashboard() {
  return (
    <div className="p-6 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
      {/* Resumo Geral */}
      <Card>
        <CardContent className="flex items-center gap-4 p-4">
          <Users className="w-8 h-8 text-blue-500" />
          <div>
            <h4 className="text-lg font-semibold">Funcionários Ativos</h4>
            <p className="text-2xl">42</p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="flex items-center gap-4 p-4">
          <CalendarDays className="w-8 h-8 text-green-500" />
          <div>
            <h4 className="text-lg font-semibold">Férias Hoje</h4>
            <p className="text-2xl">3</p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="flex items-center gap-4 p-4">
          <AlertCircle className="w-8 h-8 text-red-500" />
          <div>
            <h4 className="text-lg font-semibold">Atestados no Mês</h4>
            <p className="text-2xl">6</p>
          </div>
        </CardContent>
      </Card>

      {/* Gráfico de Folha de Pagamento */}
      <Card className="col-span-1 md:col-span-2">
        <CardContent className="p-4">
          <h4 className="text-lg font-semibold mb-2">Custo com Folha (últimos 4 meses)</h4>
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={data}>
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="folha" stroke="#3b82f6" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      {/* Atalhos Rápidos */}
      <Card>
        <CardContent className="p-4 flex flex-col gap-2">
          <h4 className="text-lg font-semibold mb-2">Atalhos Rápidos</h4>
          <Button variant="outline" className="flex gap-2 items-center">
            <PlusCircle className="w-4 h-4" /> Novo Funcionário
          </Button>
          <Button variant="outline" className="flex gap-2 items-center">
            <FileText className="w-4 h-4" /> Gerar Holerite
          </Button>
          <Button variant="outline" className="flex gap-2 items-center">
            <BarChart2 className="w-4 h-4" /> Relatórios INSS/FGTS
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}
