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/protocols-dashboard';
export const description =
  'Métricas de protocolos — tipos e status (gestão pública)';

const protocolsByTypeConfig = {
  licitacao: { label: 'Licitações', color: '#0b69a3' },
  contrato: { label: 'Contratos', color: '#007cb8' },
  convenio: { label: 'Convênios', color: '#36c1fa' },
  termo: { label: 'Termos Aditivos', color: '#7cd5fd' },
} satisfies ChartConfig;

const protocolsByTypeData = [
  { type: 'Licitação', count: 32 },
  { type: 'Contrato', count: 48 },
  { type: 'Convênio', count: 18 },
  { type: 'Termo Aditivo', count: 7 },
];

const protocolStatusConfig = {
  andamento: { label: 'Em andamento', color: '#007cb8' },
  concluido: { label: 'Concluído', color: '#0ca9eb' },
  suspenso: { label: 'Suspenso', color: '#36c1fa' },
  cancelado: { label: 'Cancelado', color: '#7cd5fd' },
} satisfies ChartConfig;

const protocolStatusData = [
  { status: 'andamento', count: 65, fill: '#007cb8' },
  { status: 'concluido', count: 20, fill: '#0ca9eb' },
  { status: 'suspenso', count: 8, fill: '#36c1fa' },
  { status: 'cancelado', count: 7, fill: '#7cd5fd' },
];

export function App() {
  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>Protocolos por Tipo</CardTitle>
            <CardDescription>
              Distribuição de protocolos por tipo de procedimento
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={protocolsByTypeConfig}>
              <BarChart accessibilityLayer data={protocolsByTypeData}>
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey="type"
                  tickLine={false}
                  tickMargin={10}
                  axisLine={false}
                />
                <ChartTooltip
                  cursor={false}
                  content={<ChartTooltipContent hideLabel />}
                />
                <Bar dataKey="count" fill="#0b69a3" radius={8} />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <Card className="flex flex-col">
          <CardHeader className="items-center pb-0">
            <CardTitle>Status dos Protocolos</CardTitle>
            <CardDescription>
              Visão geral do status operacional dos protocolos
            </CardDescription>
          </CardHeader>
          <CardContent className="flex-1 pb-0">
            <ChartContainer
              config={protocolStatusConfig}
              className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-80 pb-0">
              <PieChart>
                <ChartTooltip content={<ChartTooltipContent hideLabel />} />
                <Pie
                  data={protocolStatusData}
                  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">
              65% dos protocolos em andamento <TrendingUp className="h-4 w-4" />
            </div>
            <div className="text-muted-foreground leading-none">
              Resumo dos principais status dos protocolos
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}
