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 palette = {
  50: '#F0F9FF',
  100: '#E0F2FE',
  200: '#B9E7FE',
  300: '#7CD5FD',
  400: '#36C1FA',
  500: '#0CA9EB',
  600: '#007CB8',
  700: '#016BA3',
  800: '#065B86',
  900: '#0B4B6F',
  950: '#07304A',
} as const;

const protocolsByTypeConfig = {
  licitacao: { label: 'Licitações', color: palette[700] },
  contrato: { label: 'Contratos', color: palette[600] },
  convenio: { label: 'Convênios', color: palette[400] },
  termo: { label: 'Termos Aditivos', color: palette[300] },
} 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 = {
  Criado: { label: 'Criado', color: palette[950] },
  'Aguardando Trâmite': { label: 'Aguardando Trâmite', color: palette[900] },
  'Aguardando Recebimento': {
    label: 'Aguardando Recebimento',
    color: palette[800],
  },
  Enviado: { label: 'Enviado', color: palette[700] },
  Recebido: { label: 'Recebido', color: palette[600] },
  'Aguardando Entrega': { label: 'Aguardando Entrega', color: palette[500] },
  Entregue: { label: 'Entregue', color: palette[400] },
  Finalizado: { label: 'Finalizado', color: palette[300] },
  Cancelado: { label: 'Cancelado', color: palette[200] },
  Arquivado: { label: 'Arquivado', color: palette[100] },
} satisfies ChartConfig;

const protocolStatusData = [
  { status: 'Criado', count: 12, fill: palette[950] },
  { status: 'Aguardando Trâmite', count: 20, fill: palette[900] },
  { status: 'Aguardando Recebimento', count: 10, fill: palette[800] },
  { status: 'Enviado', count: 8, fill: palette[700] },
  { status: 'Recebido', count: 25, fill: palette[600] },
  { status: 'Aguardando Entrega', count: 5, fill: palette[500] },
  { status: 'Entregue', count: 7, fill: palette[400] },
  { status: 'Finalizado', count: 18, fill: palette[300] },
  { status: 'Cancelado', count: 3, fill: palette[200] },
  { status: 'Arquivado', count: 2, fill: palette[100] },
];

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>
  );
}
