// pages/manutencoes/man_dashboard.tsx

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CalendarDays, Wrench, History, AlertTriangle, PlusCircle } from "lucide-react";
import { BarChart, PieChart } from "@/components/custom/Charts"; // Supondo componentes customizados

const ManDashboard = () => {
  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Dashboard de Manutenções</h1>

      {/* Cards Resumo */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <p className="text-muted-foreground">Total em Andamento</p>
              <p className="text-xl font-semibold">8</p>
            </div>
            <Wrench className="w-8 h-8 text-yellow-500" />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <p className="text-muted-foreground">Concluídas no Mês</p>
              <p className="text-xl font-semibold">15</p>
            </div>
            <History className="w-8 h-8 text-green-500" />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <p className="text-muted-foreground">Com Atraso</p>
              <p className="text-xl font-semibold">2</p>
            </div>
            <AlertTriangle className="w-8 h-8 text-red-500" />
          </CardContent>
        </Card>
      </div>

      {/* Gráficos */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardContent className="p-4">
            <h2 className="text-lg font-semibold mb-2">Custos de Manutenção por Categoria</h2>
            <PieChart
              labels={["Caminhões", "Máquinas", "Informática", "Outros"]}
              values={[12000, 8000, 2000, 1500]}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h2 className="text-lg font-semibold mb-2">Manutenções por Mês</h2>
            <BarChart
              labels={["Jan", "Fev", "Mar", "Abr", "Mai"]}
              values={[10, 15, 8, 12, 14]}
            />
          </CardContent>
        </Card>
      </div>

      {/* Ações rápidas */}
      <div className="flex flex-wrap gap-4 mt-6">
        <Button variant="default" className="flex items-center gap-2">
          <PlusCircle size={18} /> Nova Manutenção
        </Button>
        <Button variant="outline" className="flex items-center gap-2">
          <CalendarDays size={18} /> Ver Agenda
        </Button>
        <Button variant="outline" className="flex items-center gap-2">
          <History size={18} /> Histórico
        </Button>
      </div>
    </div>
  );
};

export default ManDashboard;
