import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/views/components/ui/card';
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@/views/components/ui/chart';
import { TrendingUp } from 'lucide-react';
import { Bar, BarChart, CartesianGrid, Pie, PieChart, XAxis } from 'recharts';

import { Header } from './views/components/header';

import type { ChartConfig } from './views/components/ui/chart';
import ProtocolsDashboard from './views/protocols/ProtocolsDashboard';
export const description = 'A stacked bar chart with a legend';

export function App() {
  // dashboard now uses ProtocolsDashboard for protocol status cards

  const bestPricesConfig = {
    price: {
      label: 'Preço',
      color: '#007cb8',
    },
  } satisfies ChartConfig;

  const bestPricesData = [
    { station: 'Shell', price: 5.42 },
    { station: 'Ipiranga', price: 5.35 },
    { station: 'BR', price: 5.38 },
    { station: 'Ale', price: 5.3 },
  ];

  const vehicleStatusConfig = {
    active: {
      label: 'Ativos',
      color: '#007cb8',
    },
    maintenance: {
      label: 'Manutenção',
      color: '#0ca9eb',
    },
    inactive: {
      label: 'Inativos',
      color: '#36c1fa',
    },
    reserved: {
      label: 'Reservados',
      color: '#7cd5fd',
    },
  } satisfies ChartConfig;

  const vehicleStatusData = [
    { status: 'active', count: 45, fill: '#007cb8' },
    { status: 'maintenance', count: 12, fill: '#0ca9eb' },
    { status: 'inactive', count: 8, fill: '#36c1fa' },
    { status: 'reserved', count: 15, fill: '#7cd5fd' },
  ];

  return (
    <div className="p-[18px] flex flex-col gap-6">
      <Header />

      <ProtocolsDashboard />

      <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Postos com Melhor Preço</CardTitle>
            <CardDescription>
              Comparativo de preços entre os principais postos
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={bestPricesConfig}>
              <BarChart accessibilityLayer data={bestPricesData}>
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey="station"
                  tickLine={false}
                  tickMargin={10}
                  axisLine={false}
                />
                <ChartTooltip
                  cursor={false}
                  content={<ChartTooltipContent hideLabel />}
                />
                <Bar dataKey="price" fill="var(--color-price)" radius={8} />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="flex flex-col">
          <CardHeader className="items-center pb-0">
            <CardTitle>Status dos Veículos</CardTitle>
            <CardDescription>
              Distribuição dos veículos por status de operação
            </CardDescription>
          </CardHeader>
          <CardContent className="flex-1 pb-0">
            <ChartContainer
              config={vehicleStatusConfig}
              className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-80 pb-0">
              <PieChart>
                <ChartTooltip content={<ChartTooltipContent hideLabel />} />
                <Pie
                  data={vehicleStatusData}
                  dataKey="count"
                  label
                  nameKey="status"
                />
              </PieChart>
            </ChartContainer>
          </CardContent>
          <CardFooter className="flex-col gap-2 text-sm">
            <div className="flex items-center gap-2 leading-none font-medium">
              Frota operando com 85% de disponibilidade{' '}
              <TrendingUp className="h-4 w-4" />
            </div>
            <div className="text-muted-foreground leading-none">
              Status atual da frota de veículos
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}
