'use client';

import { useState, useEffect } from 'react';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter,
} from '@/components/ui/card';
import {
  AlertCircle,
  Activity,
  MapPin as MapPinIcon,
  Milestone,
  BarChart3,
  AlertTriangle,
  Zap,
  PencilLine,
  CheckCircle2,
  Settings2,
} from 'lucide-react';
import { StatsCard } from '@/components/dashboard/stats-card';
import { FilterSelector } from '@/components/dashboard/filter-selector';
import { DetectionDonutChart } from '@/components/dashboard/detection-donut-chart';
import { ChainageBarChart } from '@/components/dashboard/chainage-bar-chart';
import { DashboardMap } from '@/components/dashboard/dashboard-map';
import { PageHeader } from '@/components/page-header';
import { projectService } from '@/services/api';
import { Project } from '@/types';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { DashboardSkeleton } from '@/components/dashboard/dashboard-skeleton';
import { PoweredBy } from '@/components/powered-by';
import { toast } from 'sonner';
import { Reveal, StaggerContainer, StaggerItem } from '@/components/ui/reveal';

const API_URL = process.env.NEXT_PUBLIC_API_URL;

interface ProjectSummary {
  project: {
    id: string;
    name: string;
    corridor_name: string | null;
    state: string | null;
  };
  packages: {
    [key: string]: {
      package_id: string;
      region: string | null;
      chainages: {
        [key: string]: {
          chainage_id: string;
          chainage: string | null;
          detection_count: number;
          detections: Array<{
            id: number;
            type: string;
            class: string;
            confidence: number;
            latitude: number;
            longitude: number;
          }>;
        };
      };
    };
  };
}

interface DetectionStats {
  totalDefectedSignboard: number;
  totalPothole: number;
  totalRoadCrack: number;
  totalDamagedRoadMarking: number;
  totalGoodSignboard: number;
  totalRoadDamage: number;
  chainageData: Array<{
    name: string;
    defected_sign_board: number;
    pothole: number;
    road_crack: number;
    damaged_road_marking: number;
    good_sign_board: number;
    total: number;
  }>;
}

function calculateStats(summary: ProjectSummary | null): DetectionStats {
  if (!summary) {
    return {
      totalDefectedSignboard: 0,
      totalPothole: 0,
      totalRoadCrack: 0,
      totalDamagedRoadMarking: 0,
      totalGoodSignboard: 0,
      totalRoadDamage: 0,
      chainageData: [],
    };
  }

  let total_defected_sign_board = 0;
  let total_pothole = 0;
  let total_road_crack = 0;
  let total_damaged_road_marking = 0;
  let total_good_sign_board = 0;
  let total_road_damage = 0;
  const chainageData: DetectionStats['chainageData'] = [];

  for (const pkg of Object.values(summary.packages || {})) {
    for (const [chnName, chn] of Object.entries(pkg.chainages || {})) {
      // Changed 'locName, loc' to 'chnName, chn' and 'pkg.locations' to 'pkg.chainages'
      let chnDefectedSignboard = 0; // Changed 'locDefectedSignboard' to 'chnDefectedSignboard'
      let chnPothole = 0; // Changed 'locPothole' to 'chnPothole'
      let chnRoadCrack = 0; // Changed 'locRoadCrack' to 'chnRoadCrack'
      let chnDamagedRoadMarking = 0; // Changed 'locDamagedRoadMarking' to 'chnDamagedRoadMarking'
      let chnGoodSignboard = 0; // Changed 'locGoodSignboard' to 'chnGoodSignboard'

      for (const detection of chn.detections || []) {
        // Changed 'loc.detections' to 'chn.detections'
        const type = detection.type.toLowerCase();
        if (type === 'defected_sign_board') {
          chnDefectedSignboard++;
          total_defected_sign_board++;
        } else if (type === 'pothole') {
          chnPothole++;
          total_pothole++;
        } else if (type === 'road_crack') {
          chnRoadCrack++;
          total_road_crack++;
        } else if (type === 'damaged_road_marking') {
          chnDamagedRoadMarking++;
          total_damaged_road_marking++;
        } else if (type === 'good_sign_board') {
          chnGoodSignboard++;
          total_good_sign_board++;
        }
      }

      const chnTotalDamage = // Changed 'locTotalDamage' to 'chnTotalDamage'
        chnDefectedSignboard + chnPothole + chnRoadCrack + chnDamagedRoadMarking;

      if (
        chnDefectedSignboard > 0 ||
        chnPothole > 0 ||
        chnRoadCrack > 0 ||
        chnDamagedRoadMarking > 0 ||
        chnGoodSignboard > 0
      ) {
        const shortName = chnName.length > 20 ? chnName.substring(0, 20) + '...' : chnName;
        chainageData.push({
          // Changed 'locationData.push' to 'chainageData.push'
          name: shortName,
          defected_sign_board: chnDefectedSignboard,
          pothole: chnPothole,
          road_crack: chnRoadCrack,
          damaged_road_marking: chnDamagedRoadMarking,
          good_sign_board: chnGoodSignboard,
          total:
            chnDefectedSignboard +
            chnPothole +
            chnRoadCrack +
            chnDamagedRoadMarking +
            chnGoodSignboard,
        });
      }
    }
  }

  total_road_damage =
    total_defected_sign_board + total_pothole + total_road_crack + total_damaged_road_marking;

  return {
    totalDefectedSignboard: total_defected_sign_board,
    totalPothole: total_pothole,
    totalRoadCrack: total_road_crack,
    totalDamagedRoadMarking: total_damaged_road_marking,
    totalGoodSignboard: total_good_sign_board,
    totalRoadDamage: total_road_damage,
    chainageData,
  };
}

export default function DashboardPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [projects, setProjects] = useState<Project[]>([]);
  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
  const [projectSummary, setProjectSummary] = useState<ProjectSummary | null>(null);
  const [stats, setStats] = useState<DetectionStats>({
    totalDefectedSignboard: 0,
    totalPothole: 0,
    totalRoadCrack: 0,
    totalDamagedRoadMarking: 0,
    totalGoodSignboard: 0,
    totalRoadDamage: 0,
    chainageData: [],
  });

  // Load projects on mount
  useEffect(() => {
    const loadProjects = async () => {
      try {
        setIsLoading(true);
        const projectsData = await projectService.getProjects();
        setProjects(projectsData.items);

        if (projectsData.items.length > 0) {
          setSelectedProjectId(projectsData.items[0].id);
        }
      } catch (err) {
        console.error('Failed to load projects:', err);
        toast.error('Failed to load projects', {
          description: 'Please check if the backend is running.',
        });
      } finally {
        setTimeout(() => {
          setIsLoading(false);
        }, 1500);
      }
    };

    loadProjects();
  }, []);

  const selectedProject = projects.find((p) => p.id === selectedProjectId);

  // Extract packages from project summary
  const packages = projectSummary
    ? Object.keys(projectSummary.packages || {}).map((pkgName) => ({
        id: pkgName,
        name: pkgName,
      }))
    : [];

  // Extract chainages from selected package
  const [selectedPackageId, setSelectedPackageId] = useState<string | null>(null);
  const [selectedChainageId, setSelectedChainageId] = useState<string | null>(null); // Changed 'selectedLocationId' to 'selectedChainageId'

  const chainages =
    projectSummary && selectedPackageId && selectedPackageId !== 'all'
      ? Object.keys(projectSummary.packages[selectedPackageId]?.chainages || {}).map((chnName) => ({
          id: chnName,
          name: chnName,
        }))
      : [];

  // Load project summary when project changes
  useEffect(() => {
    if (!selectedProjectId) {
      setProjectSummary(null);
      return;
    }

    const loadProjectSummary = async () => {
      try {
        setIsLoading(true);

        const summary: ProjectSummary = await projectService.getProjectSummary(selectedProjectId);
        setProjectSummary(summary);
      } catch (err) {
        console.error('Failed to load project summary:', err);
        toast.error('Failed to load project summary');
        setProjectSummary(null);
      } finally {
        setTimeout(() => {
          setIsLoading(false);
        }, 1500);
      }
    };

    loadProjectSummary();
  }, [selectedProjectId]);

  // Reset package and chainage when project changes
  useEffect(() => {
    setSelectedPackageId(null);
    setSelectedChainageId(null); // Changed 'setSelectedLocationId' to 'setSelectedChainageId'
  }, [selectedProjectId]);

  // Reset chainage when package changes
  useEffect(() => {
    setSelectedChainageId(null);
  }, [selectedPackageId]);

  // Filter stats based on selections
  useEffect(() => {
    if (!projectSummary) {
      setStats({
        totalDefectedSignboard: 0,
        totalPothole: 0,
        totalRoadCrack: 0,
        totalDamagedRoadMarking: 0,
        totalGoodSignboard: 0,
        totalRoadDamage: 0,
        chainageData: [], // Changed 'locationData' to 'chainageData'
      });
      return;
    }

    let totalDefectedSignboard = 0;
    let totalPothole = 0;
    let totalRoadCrack = 0;
    let totalDamagedRoadMarking = 0;
    let totalGoodSignboard = 0;
    const chainageData: DetectionStats['chainageData'] = [];

    const packagesToProcess =
      selectedPackageId && selectedPackageId !== 'all'
        ? { [selectedPackageId]: projectSummary.packages[selectedPackageId] }
        : projectSummary.packages || {};

    for (const [pkgName, pkg] of Object.entries(packagesToProcess)) {
      const chainagesToProcess =
        selectedChainageId && selectedChainageId !== 'all'
          ? { [selectedChainageId]: pkg.chainages[selectedChainageId] }
          : pkg.chainages || {};

      for (const [chnName, chn] of Object.entries(chainagesToProcess)) {
        if (!chn) continue;

        let chnDefectedSignboard = 0;
        let chnPothole = 0;
        let chnRoadCrack = 0;
        let chnDamagedRoadMarking = 0;
        let chnGoodSignboard = 0;

        for (const detection of chn.detections || []) {
          const type = detection.type.toLowerCase();
          if (type === 'defected_sign_board') {
            chnDefectedSignboard++;
            totalDefectedSignboard++;
          } else if (type === 'pothole') {
            chnPothole++;
            totalPothole++;
          } else if (type === 'road_crack') {
            chnRoadCrack++;
            totalRoadCrack++;
          } else if (type === 'damaged_road_marking') {
            chnDamagedRoadMarking++;
            totalDamagedRoadMarking++;
          } else if (type === 'good_sign_board') {
            chnGoodSignboard++;
            totalGoodSignboard++;
          }
        }

        if (
          chnDefectedSignboard > 0 ||
          chnPothole > 0 ||
          chnRoadCrack > 0 ||
          chnDamagedRoadMarking > 0 ||
          chnGoodSignboard > 0
        ) {
          const shortName = chnName.length > 20 ? chnName.substring(0, 20) + '...' : chnName;
          chainageData.push({
            name: shortName,
            defected_sign_board: chnDefectedSignboard,
            pothole: chnPothole,
            road_crack: chnRoadCrack,
            damaged_road_marking: chnDamagedRoadMarking,
            good_sign_board: chnGoodSignboard,
            total:
              chnDefectedSignboard +
              chnPothole +
              chnRoadCrack +
              chnDamagedRoadMarking +
              chnGoodSignboard,
          });
        }
      }
    }

    setStats({
      totalDefectedSignboard,
      totalPothole,
      totalRoadCrack,
      totalDamagedRoadMarking,
      totalGoodSignboard,
      totalRoadDamage:
        totalDefectedSignboard + totalPothole + totalRoadCrack + totalDamagedRoadMarking,
      chainageData,
    });
  }, [projectSummary, selectedPackageId, selectedChainageId]);

  return (
    <>
      {/* Main Content */}
      <main>
        <div>
          {/* Header */}
          <div className="mb-8 flex items-center justify-between">
            <PageHeader
              title="Dashboard"
              description="A Comprehensive Overview Of Your Road Infrastructure Analysis"
              icon={BarChart3}
            />

            <Reveal direction="down" delay={0.2}>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline" className="gap-2 font-semibold">
                    <Settings2 className="h-4 w-4" />
                    <span>Filters</span>
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[320px] p-0 overflow-hidden" align="end">
                  <div className="p-4 border-b bg-muted/30">
                    <h3 className="font-bold text-sm flex items-center gap-2 text-foreground">
                      <Milestone className="h-4 w-4 text-primary" />
                      Filter Analysis
                    </h3>
                    <p className="text-xs mt-1 text-muted-foreground">
                      Refine your view by project, package, or chainage
                    </p>
                  </div>
                  <div>
                    <FilterSelector
                      projects={projects}
                      selectedProjectId={selectedProjectId}
                      selectedPackageId={selectedPackageId}
                      selectedChainageId={selectedChainageId} // Changed 'selectedLocationId' to 'selectedChainageId'
                      onProjectChange={setSelectedProjectId}
                      onPackageChange={setSelectedPackageId}
                      onChainageChange={setSelectedChainageId} // Changed 'onLocationChange' to 'onChainageChange'
                      packages={packages}
                      chainages={chainages} // Changed 'locations' to 'chainages'
                      isLoading={isLoading}
                    />
                  </div>
                </PopoverContent>
              </Popover>
            </Reveal>
          </div>

          {isLoading && !projectSummary ? (
            <DashboardSkeleton />
          ) : (
            <>
              {/* Stats Cards - Top Row */}
              <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                <StaggerItem>
                  <StatsCard
                    title="Total Road Damage"
                    subtitle="Combined damage detections"
                    value={stats.totalRoadDamage}
                    icon={Activity}
                  />
                </StaggerItem>
                <StaggerItem>
                  <StatsCard
                    title="Potholes"
                    subtitle="Surface depressions"
                    value={stats.totalPothole}
                    icon={AlertCircle}
                  />
                </StaggerItem>
                <StaggerItem>
                  <StatsCard
                    title="Defected Signboards"
                    subtitle="Damaged traffic signs"
                    value={stats.totalDefectedSignboard}
                    icon={AlertTriangle}
                  />
                </StaggerItem>
                <StaggerItem>
                  <StatsCard
                    title="Road Cracks"
                    subtitle="Surface fissures"
                    value={stats.totalRoadCrack}
                    icon={Zap}
                  />
                </StaggerItem>
                <StaggerItem>
                  <StatsCard
                    title="Damaged Markings"
                    subtitle="Worn road lines"
                    value={stats.totalDamagedRoadMarking}
                    icon={PencilLine}
                  />
                </StaggerItem>
                <StaggerItem>
                  <StatsCard
                    title="Good Signboards"
                    subtitle="Informational markers"
                    value={stats.totalGoodSignboard}
                    icon={CheckCircle2}
                  />
                </StaggerItem>
              </StaggerContainer>

              {/* Charts Row - Side by Side */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
                <Reveal delay={0.2} direction="left" className="flex flex-col">
                  <Card className="flex-1 h-full">
                    <CardHeader className="items-center pb-0">
                      <CardTitle>Detection Distribution</CardTitle>
                      <CardDescription>Breakdown of all detected road conditions</CardDescription>
                    </CardHeader>
                    <CardContent className="flex-1 pb-0">
                      <DetectionDonutChart
                        defectedSignboard={stats.totalDefectedSignboard}
                        pothole={stats.totalPothole}
                        roadCrack={stats.totalRoadCrack}
                        damagedRoadMarking={stats.totalDamagedRoadMarking}
                        goodSignboard={stats.totalGoodSignboard}
                      />
                    </CardContent>
                    <CardFooter className="flex-col gap-2 text-sm">
                      <div className="leading-none text-muted-foreground">
                        Total detections: {stats.totalRoadDamage + stats.totalGoodSignboard}
                      </div>
                    </CardFooter>
                  </Card>
                </Reveal>

                <Reveal delay={0.3} direction="right" className="flex flex-col">
                  <Card className="flex-1 h-full">
                    <CardHeader className="items-center pb-0">
                      <CardTitle className="text-base font-bold">Severity by Chainage</CardTitle>
                      <CardDescription className="text-xs">
                        Detections grouped by road segment
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="h-[300px]">
                      <ChainageBarChart data={stats.chainageData || []} isLoading={isLoading} />
                    </CardContent>
                    <CardFooter className="flex-col gap-2 text-sm">
                      <div className="leading-none text-muted-foreground">
                        Analysis based on latest processed sequence
                      </div>
                    </CardFooter>
                  </Card>
                </Reveal>
              </div>

              {/* Map - Full Width Below Charts */}
              <Reveal delay={0.4} direction="up">
                <div>
                  <DashboardMap
                    selectedProjectId={selectedProjectId}
                    selectedPackageId={selectedPackageId}
                    selectedChainageId={selectedChainageId} // Changed 'selectedLocationId' to 'selectedChainageId'
                    projectSummary={projectSummary}
                  />
                </div>
              </Reveal>
            </>
          )}

          <PoweredBy />
        </div>
      </main>
    </>
  );
}