'use client';

import {
  useMunicipalityQuery,
  useParishQuery,
  useStateQuery,
} from '@/feactures/location/hooks/use-query-location';
import { Button } from '@repo/shadcn/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';
import { Input } from '@repo/shadcn/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@repo/shadcn/select';
import { SelectSearchable } from '@repo/shadcn/select-searchable';
import { useState } from 'react';
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { useTrainingStatsQuery } from '../hooks/use-training-statistics';
import { exportTrainingAction } from '../actions/training-actions';
import { Download } from 'lucide-react';

const OSP_TYPES = [
  'EPSD',
  'EPSI',
  'UPF',
  'Cooperativa',
  'Grupo de Intercambio',
];

export function TrainingStatistics() {
  // Filter State
  const [startDate, setStartDate] = useState<string>('');
  const [endDate, setEndDate] = useState<string>('');
  const [stateId, setStateId] = useState<number>(0);
  const [municipalityId, setMunicipalityId] = useState<number>(0);
  const [parishId, setParishId] = useState<number>(0);
  const [ospType, setOspType] = useState<string>('');

  // Location Data
  const { data: dataState } = useStateQuery();
  const { data: dataMunicipality } = useMunicipalityQuery(stateId);
  const { data: dataParish } = useParishQuery(municipalityId);

  const stateOptions = dataState?.data || [{ id: 0, name: 'Sin estados' }];
  const municipalityOptions =
    Array.isArray(dataMunicipality?.data) && dataMunicipality.data.length > 0
      ? dataMunicipality.data
      : [{ id: 0, stateId: 0, name: 'Sin Municipios' }];
  const parishOptions =
    Array.isArray(dataParish?.data) && dataParish.data.length > 0
      ? dataParish.data
      : [{ id: 0, stateId: 0, name: 'Sin Parroquias' }];

  // Query with Filters
  const { data, isLoading, refetch } = useTrainingStatsQuery({
    startDate: startDate || undefined,
    endDate: endDate || undefined,
    stateId: stateId || undefined,
    municipalityId: municipalityId || undefined,
    parishId: parishId || undefined,
    ospType: ospType || undefined,
  });

  const handleClearFilters = () => {
    setStartDate('');
    setEndDate('');
    setStateId(0);
    setMunicipalityId(0);
    setParishId(0);
    setOspType('');
  };

  const [isExporting, setIsExporting] = useState(false);

  const handleExport = async () => {
    try {
      setIsExporting(true);
      const bytes = await exportTrainingAction({
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        stateId: stateId || undefined,
        municipalityId: municipalityId || undefined,
        parishId: parishId || undefined,
        ospType: ospType || undefined,
      });

      const blob = new Blob([new Uint8Array(bytes)], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `entrenamientos_${new Date().toISOString().split('T')[0]}.xlsx`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error('Error exporting:', error);
    } finally {
      setIsExporting(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex justify-center p-8">Cargando estadísticas...</div>
    );
  }

  if (!data) {
    return (
      <div className="flex justify-center p-8">No hay datos disponibles.</div>
    );
  }

  const {
    totalOsps,
    // totalProducers,
    statusDistribution,
    activityDistribution,
    typeDistribution,
    stateDistribution,
    yearDistribution,
    ecoSectorDistribution,
    productiveSectorDistribution,
    centralActivityDistribution,
    mainActivityDistribution,
    structureTypeDistribution,
    isOpenSpaceDistribution,
    hasTransportDistribution,
    genderDistribution,
    municipalityDistribution,
    parishDistribution,
  } = data;

  const COLORS = [
    '#0088FE',
    '#00C49F',
    '#FFBB28',
    '#FF8042',
    '#8884d8',
    '#82ca9d',
  ];

  return (
    <div className="space-y-6">
      {/* Filters Section */}
      <Card>
        <CardHeader>
          <CardTitle>Filtros</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Fecha Inicio</label>
              <Input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Fecha Fin</label>
              <Input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Estado</label>
              <SelectSearchable
                options={stateOptions.map((item) => ({
                  value: item.id.toString(),
                  label: item.name,
                }))}
                onValueChange={(value: any) => {
                  setStateId(Number(value));
                  setMunicipalityId(0); // Reset municipality
                  setParishId(0); // Reset parish
                }}
                placeholder="Selecciona un estado"
                defaultValue={stateId ? stateId.toString() : ''}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Municipio</label>
              <SelectSearchable
                options={municipalityOptions.map((item) => ({
                  value: item.id.toString(),
                  label: item.name,
                }))}
                onValueChange={(value: any) => {
                  setMunicipalityId(Number(value));
                  setParishId(0);
                }}
                placeholder="Selecciona municipio"
                defaultValue={municipalityId ? municipalityId.toString() : ''}
                disabled={!stateId || stateId === 0}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Parroquia</label>
              <SelectSearchable
                options={parishOptions.map((item) => ({
                  value: item.id.toString(),
                  label: item.name,
                }))}
                onValueChange={(value: any) => setParishId(Number(value))}
                placeholder="Selecciona parroquia"
                defaultValue={parishId ? parishId.toString() : ''}
                disabled={!municipalityId || municipalityId === 0}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Tipo de OSP</label>
              <Select value={ospType} onValueChange={setOspType}>
                <SelectTrigger>
                  <SelectValue placeholder="Todos" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  {OSP_TYPES.map((type) => (
                    <SelectItem key={type} value={type}>
                      {type}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-end gap-2">
              <Button variant="outline" onClick={handleClearFilters}>
                Limpiar Filtros
              </Button>
              <Button
                variant="default"
                onClick={handleExport}
                disabled={isExporting}
                className="bg-green-600 hover:bg-green-700"
              >
                <Download className="mr-2 h-4 w-4" />
                {isExporting ? 'Exportando...' : 'Exportar Excel'}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Statistics Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Total de OSP Registradas
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalOsps}</div>
            <p className="text-xs text-muted-foreground">
              Organizaciones Socioproductivas
            </p>
          </CardContent>
        </Card>

        {/* <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Total de Productores
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalProducers}</div>
            <p className="text-xs text-muted-foreground">
              Productores asociados
            </p>
          </CardContent>
        </Card> */}


        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Actividad Productiva</CardTitle>
            <CardDescription>
              Distribución por tipo de actividad
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={activityDistribution}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="name" type="category" width={150} />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#8884d8" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* Location Distribution (Dynamic) */}
        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Distribución por Estado</CardTitle>
            <CardDescription>OSP registradas por estado</CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={stateDistribution}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#00C49F" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {stateId > 0 ? (
          <Card className="col-span-full">
            <CardHeader>
              <CardTitle>Distribución por Municipio</CardTitle>
              <CardDescription>OSP registradas en este estado</CardDescription>
            </CardHeader>
            <CardContent className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={municipalityDistribution}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip wrapperStyle={{ color: '#000' }} />
                  <Legend />
                  <Bar dataKey="value" fill="#0088FE" name="Cantidad" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        ) : (
          <Card className="col-span-full">
            <CardHeader>
              <CardTitle>Distribución por Municipio</CardTitle>
              <CardDescription>Seleccione un estado</CardDescription>
            </CardHeader>
          </Card>
        )}

        {municipalityId > 0 ? (
          <Card className="col-span-full">
            <CardHeader>
              <CardTitle>Distribución por Parroquia</CardTitle>
              <CardDescription>OSP registradas en este municipio</CardDescription>
            </CardHeader>
            <CardContent className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={parishDistribution}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip wrapperStyle={{ color: '#000' }} />
                  <Legend />
                  <Bar dataKey="value" fill="#FFBB28" name="Cantidad" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        ) : (
          <Card className="col-span-full">
            <CardHeader>
              <CardTitle>Distribución por Parroquia</CardTitle>
              <CardDescription>Seleccione un municipio</CardDescription>
            </CardHeader>
          </Card>
        )}

        {/* Year Distribution */}
        <Card className="col-span-full lg:col-span-1">
          <CardHeader>
            <CardTitle>Año de Constitución</CardTitle>
            <CardDescription>Año de registro de la empresa</CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={yearDistribution}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#FFBB28" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card className="col-span-1 md:col-span-2 lg:col-span-1">
          <CardHeader>
            <CardTitle>Estatus Actual</CardTitle>
            <CardDescription>Estado operativo de las OSP</CardDescription>
          </CardHeader>
          <CardContent className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={statusDistribution}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={5}
                  dataKey="value"
                >
                  {statusDistribution.map((entry, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={COLORS[index % COLORS.length]}
                    />
                  ))}
                </Pie>
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
        <Card className="col-span-1 md:col-span-2 lg:col-span-1">
          <CardHeader>
            <CardTitle>Tipo de Organización</CardTitle>
            <CardDescription>Clasificación de las OSP</CardDescription>
          </CardHeader>
          <CardContent className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={typeDistribution}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#82ca9d" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* ECO SECTOR DISTRIBUTION */}
        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Sector Económico</CardTitle>
            <CardDescription>
              Distribución por sector económico
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={ecoSectorDistribution}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="name" type="category" width={150} />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#0088FE" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* PRODUCTIVE SECTOR DISTRIBUTION */}
        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Sector Productivo</CardTitle>
            <CardDescription>
              Distribución por sector productivo
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={productiveSectorDistribution}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="name" type="category" width={150} />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#00C49F" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* CENTRAL PRODUCTIVE ACTIVITY DISTRIBUTION */}
        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Actividad Central Productiva</CardTitle>
            <CardDescription>
              Distribución por actividad central productiva
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={centralActivityDistribution}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="name" type="category" width={150} />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#FF8042" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* MAIN PRODUCTIVE ACTIVITY DISTRIBUTION */}
        <Card className="col-span-full">
          <CardHeader>
            <CardTitle>Actividad Productiva Principal</CardTitle>
            <CardDescription>
              Distribución por actividad productiva principal
            </CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={mainActivityDistribution}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="name" type="category" width={150} />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#8884d8" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* STRUCTURE TYPE DISTRIBUTION */}
        <Card className="col-span-full lg:col-span-2">
          <CardHeader>
            <CardTitle>Tipo de Estructura</CardTitle>
            <CardDescription>Distribución física</CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={structureTypeDistribution}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#82ca9d" name="Cantidad" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* GENDER DISTRIBUTION */}
        <Card className="col-span-full lg:col-span-1">
          <CardHeader>
            <CardTitle>Distribución de Género</CardTitle>
            <CardDescription>Conteo total por género</CardDescription>
          </CardHeader>
          <CardContent className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={genderDistribution}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip wrapperStyle={{ color: '#000' }} />
                <Legend />
                <Bar dataKey="value" fill="#8884d8" name="Personas" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* OPEN SPACE AND TRANSPORT (PIE CHARTS) */}
        <div className="col-span-full grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card>
            <CardHeader>
              <CardTitle>Espacio Abierto</CardTitle>
              <CardDescription>¿Poseen áreas libres?</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={isOpenSpaceDistribution}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                    paddingAngle={5}
                    dataKey="value"
                  >
                    {isOpenSpaceDistribution.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={COLORS[(index + 2) % COLORS.length]}
                      />
                    ))}
                  </Pie>
                  <Tooltip wrapperStyle={{ color: '#000' }} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Transporte</CardTitle>
              <CardDescription>¿Tienen vehículo propio?</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={hasTransportDistribution}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                    paddingAngle={5}
                    dataKey="value"
                  >
                    {hasTransportDistribution.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={COLORS[(index + 4) % COLORS.length]}
                      />
                    ))}
                  </Pie>
                  <Tooltip wrapperStyle={{ color: '#000' }} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}