'use client';

import {
  useMunicipalityQuery,
  useParishQuery,
  useStateQuery,
} from '@/feactures/location/hooks/use-query-location';
import { Badge } from '@repo/shadcn/badge';
import { Button } from '@repo/shadcn/button';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/components/ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@repo/shadcn/components/ui/dialog';
import { ScrollArea } from '@repo/shadcn/components/ui/scroll-area';
import { Separator } from '@repo/shadcn/components/ui/separator';
import {
  ExternalLink,
  Factory,
  MapPin,
  Package,
  Wrench,
  X,
} from 'lucide-react';
import React, { useState } from 'react';
import { TrainingSchema } from '../schemas/training';

interface TrainingViewModalProps {
  data: TrainingSchema | null;
  isOpen: boolean;
  onClose: () => void;
}

export function TrainingViewModal({
  data,
  isOpen,
  onClose,
}: TrainingViewModalProps) {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  const { data: statesData } = useStateQuery();
  const { data: municipalitiesData } = useMunicipalityQuery(data?.state || 0);
  const { data: parishesData } = useParishQuery(data?.municipality || 0);

  if (!data) return null;

  const stateName = statesData?.data?.find(
    (s: any) => s.id === data.state,
  )?.name;
  const municipalityName = municipalitiesData?.data?.find(
    (m: any) => m.id === data.municipality,
  )?.name;
  const parishName = parishesData?.data?.find(
    (p: any) => p.id === data.parish,
  )?.name;

  const DetailItem = ({ label, value }: { label: string; value: any }) => (
    <div className="space-y-1">
      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
        {label}
      </p>
      <p className="text-sm font-semibold text-foreground break-words">
        {value !== null && value !== undefined && value !== '' ? value : 'N/A'}
      </p>
    </div>
  );

  const Section = ({
    title,
    icon: Icon,
    children,
  }: {
    title: string;
    icon?: React.ElementType;
    children: React.ReactNode;
  }) => (
    <Card className="overflow-hidden border-l-4 border-l-primary/20">
      <CardHeader className="py-3 bg-muted/30">
        <CardTitle className="text-lg flex items-center gap-2">
          {Icon && <Icon className="h-5 w-5 text-primary" />}
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-6 pt-4">
        {children}
      </CardContent>
    </Card>
  );

  const BooleanBadge = ({ value }: { value?: boolean | null }) => (
    <Badge variant={value ? 'default' : 'secondary'}>
      {value ? 'Sí' : 'No'}
    </Badge>
  );

  return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="sm:max-w-[1000px] max-h-[90vh] p-0 flex flex-col">
          <DialogHeader className="px-6 py-4 border-b">
            <DialogTitle className="text-2xl font-bold flex items-center gap-2">
              <Factory className="h-6 w-6" />
              {data.ospName}
            </DialogTitle>
            <DialogDescription>
              {data.ospType} • {data.ospRif} •{' '}
              <span
                className={
                  data.currentStatus === 'ACTIVA'
                    ? 'text-green-600 font-medium'
                    : 'text-red-600'
                }
              >
                {data.currentStatus}
              </span>
            </DialogDescription>
          </DialogHeader>

          <ScrollArea className="flex-1 px-6 py-6">
            <div className="space-y-8">
              {/* 1. Datos de la Visita */}
              <Section title="Datos de la Visita">
                <DetailItem
                  label="Coordinador"
                  value={`${data.firstname} ${data.lastname}`}
                />
                <DetailItem label="Teléfono Coord." value={data.coorPhone} />
                <DetailItem
                  label="Fecha Visita"
                  value={
                    data.visitDate
                      ? new Date(data.visitDate).toLocaleString()
                      : 'N/A'
                  }
                />
                <DetailItem label="Estado" value={stateName} />
                <DetailItem label="Municipio" value={municipalityName} />
                <DetailItem label="Parroquia" value={parishName} />
              </Section>

              {/* 2. Sectores y Actividad */}
              <Section title="Sectores Económicos">
                <DetailItem label="Sector Económico" value={data.ecoSector} />
                <DetailItem
                  label="Sector Productivo"
                  value={data.productiveSector}
                />
                <DetailItem
                  label="Actividad Central"
                  value={data.centralProductiveActivity}
                />
                <DetailItem
                  label="Actividad Principal"
                  value={data.mainProductiveActivity}
                />
                <div className="col-span-full">
                  <DetailItem
                    label="Actividad Específica"
                    value={data.productiveActivity}
                  />
                </div>
              </Section>

              {/* 3. Infraestructura y Ubicación */}
              <Section title="Infraestructura y Ubicación" icon={MapPin}>
                <DetailItem
                  label="Año Constitución"
                  value={data.companyConstitutionYear}
                />
                <DetailItem
                  label="Infraestructura (m²)"
                  value={data.infrastructureMt2}
                />
                <DetailItem
                  label="Tipo Estructura"
                  value={data.structureType}
                />

                <DetailItem
                  label="Posee Transporte"
                  value={<BooleanBadge value={data.hasTransport} />}
                />
                <DetailItem
                  label="Espacio Abierto"
                  value={<BooleanBadge value={data.isOpenSpace} />}
                />

                <div className="col-span-full space-y-4 mt-2">
                  <div className="space-y-1">
                    <p className="text-xs font-medium text-muted-foreground uppercase">
                      Dirección
                    </p>
                    <p className="text-sm font-medium">{data.ospAddress}</p>
                  </div>
                  {data.ospGoogleMapsLink && (
                    <Button
                      variant="outline"
                      size="sm"
                      asChild
                      className="gap-2"
                    >
                      <a
                        href={data.ospGoogleMapsLink}
                        target="_blank"
                        rel="noreferrer"
                      >
                        <MapPin className="h-4 w-4" />
                        Ver en Google Maps
                        <ExternalLink className="h-3 w-3" />
                      </a>
                    </Button>
                  )}
                </div>
              </Section>

              {/* 4. LISTAS DETALLADAS (Lo nuevo) */}

              {/* PRODUCTOS */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Package className="h-5 w-5" />
                    Productos y Mano de Obra
                    <Badge variant="secondary" className="ml-2">
                      {data.productList?.length || 0}
                    </Badge>
                  </CardTitle>
                </CardHeader>
                <CardContent className="grid gap-4">
                  {data.productList?.map((prod: any, idx: number) => (
                    <div
                      key={idx}
                      className="bg-muted/40 p-4 rounded-lg border text-sm"
                    >
                      <div className="flex justify-between items-start mb-2">
                        <h4 className="font-bold text-base text-primary">
                          {prod.productName}
                        </h4>
                        <Badge variant="outline">
                          Mano de obra:{' '}
                          {Number(prod.menCount || 0) +
                            Number(prod.womenCount || 0)}
                        </Badge>
                      </div>
                      <p className="text-muted-foreground mb-3">
                        {prod.description}
                      </p>

                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3">
                        <DetailItem label="Diario" value={prod.dailyCount} />
                        <DetailItem label="Semanal" value={prod.weeklyCount} />
                        <DetailItem label="Mensual" value={prod.monthlyCount} />
                        <DetailItem
                          label="Hombres / Mujeres"
                          value={`${prod.menCount || 0} / ${prod.womenCount || 0}`}
                        />
                      </div>

                      {/* Detalles de distribución si existen */}
                      {(prod.internalQuantity || prod.externalQuantity) && (
                        <>
                          <Separator className="my-2" />
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {prod.internalQuantity && (
                              <div>
                                <span className="text-xs font-bold text-muted-foreground block mb-1">
                                  DISTRIBUCIÓN INTERNA
                                </span>
                                <p>
                                  Cant: {prod.internalQuantity}{' '}
                                  {prod.internalUnit}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  {prod.internalDescription}
                                </p>
                              </div>
                            )}
                            {prod.externalQuantity && (
                              <div>
                                <span className="text-xs font-bold text-muted-foreground block mb-1">
                                  EXPORTACIÓN ({prod.externalCountry})
                                </span>
                                <p>
                                  Cant: {prod.externalQuantity}{' '}
                                  {prod.externalUnit}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  {prod.externalDescription}
                                </p>
                              </div>
                            )}
                          </div>
                        </>
                      )}
                    </div>
                  ))}
                  {(!data.productList || data.productList.length === 0) && (
                    <p className="text-sm text-muted-foreground italic">
                      No hay productos registrados.
                    </p>
                  )}
                </CardContent>
              </Card>

              {/* EQUIPAMIENTO Y PRODUCCIÓN */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-lg flex items-center gap-2">
                      <Wrench className="h-5 w-5" />
                      Equipamiento
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {data.equipmentList?.map((eq: any, idx: number) => (
                      <div
                        key={idx}
                        className="flex justify-between items-center p-2 rounded bg-muted/40 border"
                      >
                        <div>
                          <p className="font-medium">{eq.machine}</p>
                          <p className="text-xs text-muted-foreground">
                            {eq.specifications}
                          </p>
                        </div>
                        <Badge
                          variant="outline"
                          className="text-sm font-bold h-8 w-8 flex items-center justify-center rounded-full"
                        >
                          {eq.quantity}
                        </Badge>
                      </div>
                    ))}
                    {(!data.equipmentList ||
                      data.equipmentList.length === 0) && (
                      <p className="text-sm text-muted-foreground italic">
                        No hay equipamiento registrado.
                      </p>
                    )}
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-lg flex items-center gap-2">
                      <Factory className="h-5 w-5" />
                      Materia Prima
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {data.productionList?.map((mat: any, idx: number) => (
                      <div
                        key={idx}
                        className="flex justify-between items-center p-2 rounded bg-muted/40 border"
                      >
                        <div>
                          <p className="font-medium">{mat.rawMaterial}</p>
                          <p className="text-xs text-muted-foreground">
                            {mat.supplyType}
                          </p>
                        </div>
                        <Badge variant="secondary">
                          Cant: {mat.quantity} {mat.unit}
                        </Badge>
                      </div>
                    ))}
                    {(!data.productionList ||
                      data.productionList.length === 0) && (
                      <p className="text-sm text-muted-foreground italic">
                        No hay materia prima registrada.
                      </p>
                    )}
                  </CardContent>
                </Card>
              </div>

              {/* 5. Comuna y Responsable */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <Section title="Datos de la Comuna">
                  <DetailItem label="Comuna" value={data.communeName} />
                  <DetailItem
                    label="Código SITUR"
                    value={data.siturCodeCommune}
                  />
                  <DetailItem
                    label="Vocero"
                    value={data.communeSpokespersonName}
                  />
                  <DetailItem
                    label="Teléfono"
                    value={data.communeSpokespersonPhone}
                  />
                  <div className="col-span-full border-t pt-4 mt-2">
                    <DetailItem
                      label="Consejo Comunal"
                      value={data.communalCouncil}
                    />
                    <DetailItem
                      label="Vocero C.C."
                      value={data.communalCouncilSpokespersonName}
                    />
                  </div>
                </Section>

                <Section title="Responsable OSP">
                  <DetailItem
                    label="Nombre"
                    value={data.ospResponsibleFullname}
                  />
                  <DetailItem
                    label="Cédula"
                    value={data.ospResponsibleCedula}
                  />
                  <DetailItem
                    label="Teléfono"
                    value={data.ospResponsiblePhone}
                  />
                  <DetailItem label="Email" value={data.ospResponsibleEmail} />
                  <DetailItem
                    label="Carga Familiar"
                    value={data.familyBurden}
                  />
                  <DetailItem label="Hijos" value={data.numberOfChildren} />
                </Section>
              </div>

              {/* 6. Observaciones */}
              {(data.generalObservations || data.paralysisReason) && (
                <Card>
                  <CardHeader>
                    <CardTitle>Observaciones</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {data.generalObservations && (
                      <div>
                        <p className="text-xs font-bold text-muted-foreground uppercase mb-1">
                          Generales
                        </p>
                        <p className="text-sm">{data.generalObservations}</p>
                      </div>
                    )}
                    {data.paralysisReason && (
                      <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-900">
                        <p className="text-xs font-bold text-red-600 dark:text-red-400 uppercase mb-1">
                          Motivo de Paralización
                        </p>
                        <p className="text-sm">{data.paralysisReason}</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              )}

              {/* 7. Fotos */}
              <Section title="Registro Fotográfico">
                {[data.photo1, data.photo2, data.photo3].some(Boolean) ? (
                  <div className="col-span-full grid grid-cols-1 sm:grid-cols-3 gap-4">
                    {[data.photo1, data.photo2, data.photo3].map(
                      (photo, idx) =>
                        photo && (
                          <div
                            key={idx}
                            className="relative aspect-video rounded-lg overflow-hidden cursor-zoom-in border hover:shadow-lg transition-all"
                            onClick={() => setSelectedImage(photo)}
                          >
                            <img
                              src={`${photo}`}
                              alt={`Evidencia ${idx + 1}`}
                              className="object-cover w-full h-full"
                            />
                          </div>
                        ),
                    )}
                  </div>
                ) : (
                  <p className="text-sm text-muted-foreground col-span-full">
                    No hay imágenes cargadas.
                  </p>
                )}
              </Section>
            </div>
          </ScrollArea>

          <DialogFooter className="px-6 py-4 border-t bg-muted/20">
            <Button
              onClick={onClose}
              variant="outline"
              className="w-full sm:w-auto"
            >
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Lightbox para imágenes */}
      <Dialog
        open={!!selectedImage}
        onOpenChange={() => setSelectedImage(null)}
      >
        <DialogContent className="max-w-[95vw] max-h-[95vh] p-0 overflow-hidden bg-black/95 border-none">
          <DialogHeader className="sr-only">
            <DialogTitle>Imagen Ampliada</DialogTitle>
          </DialogHeader>
          <DialogDescription></DialogDescription>
          <div className="relative w-full h-full flex items-center justify-center p-2">
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-4 right-4 text-white hover:bg-white/20 rounded-full z-50"
              onClick={() => setSelectedImage(null)}
            >
              <X className="h-6 w-6" />
            </Button>
            {selectedImage && (
              <img
                src={`${selectedImage}`}
                alt="Vista ampliada"
                className="max-w-full max-h-[90vh] object-contain rounded-md"
              />
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}