"use client";

import { useEffect, useState } from "react";
import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api";
import { EventBus, formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";

export interface CompanyDetails {
  id: string;
  label: string;
  category: string;
  stageid: number;
  fields: {
    F: string;
    N: string;
    V: string;
    T: number;
    U: string;
    S: boolean;
  }[];
  description?: string;
}

export interface InfoPanelProps {
  selectedCompany: CompanyDetails | null;
}

interface EcosystemCounts {
  knowledge_based_count: string;
  consultant_count: string;
  startup_count: string;
  innovation_center_count: string;
  accelerator_count: string;
  university_count: string;
  fund_count: string;
  company_count: string;
  actor_count: string;
  mou_count: string;
}

interface ProcessActorsResponse {
  start_year: string;
  total_count: number;
}

interface ProcessActorsData {
  year: string;
  value: number;
}

export function InfoPanel({ selectedCompany }: InfoPanelProps) {
  const [counts, setCounts] = useState<EcosystemCounts | null>(null);
  const [processData, setProcessData] = useState<ProcessActorsData[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  // const [date, setDate] = useState<CalendarDate>();
  const [date, setDate] = useStoredDate();

  useEffect(() => {
    const handler = (date: CalendarDate) => {
      if (date) setDate(date);
    };

    EventBus.on("dateSelected", handler);

    return () => {
      EventBus.off("dateSelected", handler);
    };
  }, []);

  useEffect(() => {
    if (date.end && date.start) fetchCounts();
  }, [date]);

  const fetchCounts = async () => {
    setIsLoading(true);
    try {
      const [countsRes, processRes] = await Promise.all([
        apiService.call<EcosystemCounts>({
          ecosystem_count_function: {
            start_date: date?.start || null,
            end_date: date?.end || null,
          },
        }),
        apiService.call<ProcessActorsResponse[]>({
          process_creating_actors_function: {
            start_date: date?.start || null,
            end_date: date?.end || null,
          },
        }),
      ]);

      setCounts(
        JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0]
      );

      // Process the years data and fill missing years
      const processedData = processYearsData(
        JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors)
      );
      setProcessData(processedData);
    } catch (err) {
      console.error("Failed to fetch data:", err);
    } finally {
      setIsLoading(false);
    }
  };

  // Helper function to safely parse numbers
  const parseNumber = (value: string | undefined): number => {
    if (!value || value === "") return 0;
    const parsed = parseInt(value, 10);
    return isNaN(parsed) ? 0 : parsed;
  };

  // Helper function to process years data and fill missing years
  const processYearsData = (
    data: ProcessActorsResponse[]
  ): ProcessActorsData[] => {
    if (!data || data.length === 0) return [];

    const years = data
      .map((item) => parseInt(item.start_year))
      .sort((a, b) => a - b);

    const minYear = years[0];
    const maxYear = years[years.length - 1];
    const result: ProcessActorsData[] = [];

    // Create a map for quick lookup
    const dataMap = data.reduce(
      (acc, item) => {
        acc[item.start_year] = item.total_count;
        return acc;
      },
      {} as Record<string, number>
    );

    for (let year = minYear; year <= maxYear; year++) {
      result.push({
        year: year.toString(),
        value: dataMap[year.toString()] || 0,
      });
    }

    return result;
  };

  // Convert Persian years to display format without commas
  const formatPersianYear = (year: string): string => {
    const map: Record<string, string> = {
      "0": "۰",
      "1": "۱",
      "2": "۲",
      "3": "۳",
      "4": "۴",
      "5": "۵",
      "6": "۶",
      "7": "۷",
      "8": "۸",
      "9": "۹",
    };
    return year.replace(/[0-9]/g, (d) => map[d] ?? d);
  };

  // Transform counts into chart-friendly data
  const barData = counts
    ? [
        {
          label: "دانش بنیان",
          value: parseNumber(counts.knowledge_based_count),
        },
        { label: "مشاور", value: parseNumber(counts.consultant_count) },
        { label: "استارتاپ", value: parseNumber(counts.startup_count) },
        {
          label: "مرکز نوآوری",
          value: parseNumber(counts.innovation_center_count),
        },
        { label: "شتابدهنده", value: parseNumber(counts.accelerator_count) },
        { label: "دانشگاه", value: parseNumber(counts.university_count) },
        { label: "صندوق های مالی", value: parseNumber(counts.fund_count) },
        { label: "شرکت", value: parseNumber(counts.company_count) },
      ]
    : [];

  if (isLoading) {
    return (
      <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] min-h-full flex flex-col">
        {/* Header Skeleton */}
        <CardHeader className="text-center pb-2">
          <div className="w-48 h-6 bg-gray-600 rounded animate-pulse mx-auto mb-4"></div>
        </CardHeader>

        {/* Actor Count Skeleton */}
        <CardHeader className="text-center pt-0 pb-4">
          <div className="w-full h-5 bg-gray-600 rounded animate-pulse mx-auto mb-2"></div>
        </CardHeader>

        {/* Bar Chart Skeleton */}
        <CardContent className="flex-1 px-6">
          <div className="w-full space-y-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div
                key={i}
                className="flex items-center gap-3"
                style={{ animationDelay: `${i * 100}ms` }}
              >
                {/* Label skeleton */}
                <div className="w-24 h-4 bg-gray-600 rounded animate-pulse"></div>

                {/* Bar skeleton */}
                <div className="flex-1 bg-gray-700 rounded-full h-6">
                  <div
                    className="h-6 bg-gray-500 rounded-full animate-pulse"
                    style={{ width: `${Math.random() * 60 + 20}%` }}
                  ></div>
                </div>

                {/* Value skeleton */}
                <div className="w-8 h-4 bg-gray-600 rounded animate-pulse"></div>
              </div>
            ))}
          </div>
        </CardContent>

        {/* Area Chart Skeleton */}
        <CardContent className="px-6 pb-4">
          <div className="mb-4">
            <div className="w-40 h-5 bg-gray-600 rounded animate-pulse mb-4"></div>
          </div>
          <div className="h-64 bg-gray-700 rounded-lg relative overflow-hidden">
            {/* Chart skeleton */}
            <div className="absolute inset-4">
              {/* Y-axis skeleton */}
              <div className="absolute left-0 top-0 bottom-8 w-px bg-gray-600"></div>
              {/* X-axis skeleton */}
              <div className="absolute left-0 bottom-8 right-0 h-px bg-gray-600"></div>

              {/* Area chart skeleton */}
              <svg className="w-full h-full">
                <defs>
                  <linearGradient
                    id="areaGradient"
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%"
                  >
                    <stop offset="0%" stopColor="#34D399" stopOpacity="0.3" />
                    <stop offset="100%" stopColor="#34D399" stopOpacity="0.1" />
                  </linearGradient>
                </defs>
                <path
                  d="M 20 150 Q 60 100 100 120 T 180 80 T 260 90 T 340 60"
                  stroke="#34D399"
                  strokeWidth="2"
                  fill="none"
                  className="animate-pulse"
                />
                <path
                  d="M 20 150 Q 60 100 100 120 T 180 80 T 260 90 T 340 60 L 340 180 L 20 180 Z"
                  fill="url(#areaGradient)"
                  className="animate-pulse"
                />
              </svg>

              {/* Data points skeleton */}
              {Array.from({ length: 4 }).map((_, i) => (
                <div
                  key={i}
                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                  style={{
                    left: `${20 + i * 25}%`,
                    top: `${30 + Math.random() * 40}%`,
                    animationDelay: `${i * 200}ms`,
                  }}
                ></div>
              ))}
            </div>
          </div>
        </CardContent>

        {/* Footer Skeleton */}
        <CardContent className="pt-0 pb-6">
          <div className="bg-[rgba(255,255,255,0.1)] rounded-lg p-4 text-center"></div>
        </CardContent>
      </Card>
    );
  }

  if (isLoading) {
    return (
      <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] min-h-full flex flex-col">
        {/* Header Skeleton */}
        <CardHeader className="text-center pb-2">
          <div className="w-48 h-6  rounded animate-pulse mx-auto mb-4"></div>
        </CardHeader>

        {/* Actor Count Skeleton */}
        <CardHeader className="text-center pt-0 pb-4">
          <div className="w-36 h-5  rounded animate-pulse mx-auto mb-2"></div>
          <div className="w-16 h-8 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
        </CardHeader>

        {/* Bar Chart Skeleton */}
        <CardContent className="flex-1 px-6">
          <div className="w-full space-y-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div
                key={i}
                className="flex items-center gap-3"
                style={{ animationDelay: `${i * 100}ms` }}
              >
                {/* Label skeleton */}
                <div className="w-24 h-4 bg-gray-600 rounded animate-pulse"></div>

                {/* Bar skeleton */}
                <div className="flex-1 bg-gray-700 rounded-full h-6">
                  <div
                    className="h-6 bg-gray-500 rounded-full animate-pulse"
                    style={{ width: `${Math.random() * 60 + 20}%` }}
                  ></div>
                </div>

                {/* Value skeleton */}
                <div className="w-8 h-4 bg-gray-600 rounded animate-pulse"></div>
              </div>
            ))}
          </div>
        </CardContent>

        {/* Area Chart Skeleton */}
        <CardContent className="px-6 pb-4">
          <div className="mb-4">
            <div className="w-40 h-5 bg-gray-600 rounded animate-pulse mb-4"></div>
          </div>
          <div className="h-64 bg-gray-700 rounded-lg relative overflow-hidden">
            {/* Chart skeleton */}
            <div className="absolute inset-4">
              {/* Y-axis skeleton */}
              <div className="absolute left-0 top-0 bottom-8 w-px bg-gray-600"></div>
              {/* X-axis skeleton */}
              <div className="absolute left-0 bottom-8 right-0 h-px bg-gray-600"></div>

              {/* Area chart skeleton */}
              <svg className="w-full h-full">
                <defs>
                  <linearGradient
                    id="areaGradient"
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%"
                  >
                    <stop offset="0%" stopColor="#34D399" stopOpacity="0.3" />
                    <stop offset="100%" stopColor="#34D399" stopOpacity="0.1" />
                  </linearGradient>
                </defs>
                <path
                  d="M 20 150 Q 60 100 100 120 T 180 80 T 260 90 T 340 60"
                  stroke="#34D399"
                  strokeWidth="2"
                  fill="none"
                  className="animate-pulse"
                />
                <path
                  d="M 20 150 Q 60 100 100 120 T 180 80 T 260 90 T 340 60 L 340 180 L 20 180 Z"
                  fill="url(#areaGradient)"
                  className="animate-pulse"
                />
              </svg>

              {/* Data points skeleton */}
              {Array.from({ length: 4 }).map((_, i) => (
                <div
                  key={i}
                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                  style={{
                    left: `${20 + i * 25}%`,
                    top: `${30 + Math.random() * 40}%`,
                    animationDelay: `${i * 200}ms`,
                  }}
                ></div>
              ))}
            </div>
          </div>
        </CardContent>

        {/* Footer Skeleton */}
        <CardContent className="pt-0 pb-6">
          <div className="bg-[rgba(255,255,255,0.1)] rounded-lg p-4 text-center">
            <div className="w-28 h-4 bg-gray-600 rounded animate-pulse mx-auto mb-1"></div>
            <div className="w-12 h-6 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!counts) {
    return (
      <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] min-h-full">
        <CardContent className="flex items-center justify-center h-64">
          <div className="text-sm text-gray-300 font-persian">
            خطا در بارگذاری داده‌ها.
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
        <CardHeader className="text-center pt-4 pb-3 border-b-2 border-[#3F415A]">
          <CardTitle className="font-persian text-base font-semibold text-white">
            وضعیت زیست‌بوم فناوری و نوآوری
          </CardTitle>
        </CardHeader>

        <CardHeader className="text-center pb-2 border-b-2 border-[#3F415A]">
          <CardTitle className="font-persian text-sm text-white flex justify-between px-4">
            تعداد تفاهم نامه ها
            <span className="font-bold text-3xl">
              {formatNumber(counts.mou_count)}
            </span>
          </CardTitle>
        </CardHeader>

        <CardHeader className="text-center pb-2 border-b-2 border-[#3F415A]">
          <CardTitle className="font-persian text-sm text-white flex justify-between px-4">
            تعداد بازیگران
            <span className="font-bold text-3xl">
              {formatNumber(counts.actor_count)}
            </span>
          </CardTitle>
        </CardHeader>

        {/* Actor Count Display */}
        <CardHeader className="text-right pt-4 mt-2 pb-2 text-sm font-semibold w-full">
          تنوع بازیگران
        </CardHeader>
        {/* Middle - Bar Chart */}
        <CardContent className="flex-1 px-6 border-b-2 border-[#3F415A]">
          <div className="w-full">
            <CustomBarChart
              hasPercent={false}
              data={barData.map((item) => ({
                label: item.label,
                value: item.value,
                valueSuffix: "",
                valuePrefix: "",
                maxValue: Math.max(...barData.map((d) => d.value)),
              }))}
              barHeight="h-5"
              showAxisLabels={false}
            />
          </div>
        </CardContent>

        {/* Area Chart Section */}
        <CardContent className="p-2">
          <div className="px-4">
            <CardTitle className="font-persian text-sm font-semibold text-white mb-2">
              روند ایجاد بازیگران در طول سال‌ها
            </CardTitle>
          </div>
          <div className="h-42">
            {processData.length > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart
                  accessibilityLayer
                  data={processData}
                  margin={{ top: 25, right: 30, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient
                      id="fillDesktop"
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="1"
                    >
                      <stop offset="0%" stopColor="#3AEA83" stopOpacity={1} />
                      <stop offset="100%" stopColor="#3AEA83" stopOpacity={0} />
                    </linearGradient>
                  </defs>

                  <CartesianGrid
                    vertical={false}
                    stroke="rgba(255,255,255,0.1)"
                  />
                  <XAxis
                    dataKey="year"
                    stroke="#9ca3af"
                    fontSize={12}
                    tickLine={false}
                    tickMargin={8}
                    axisLine={false}
                    tickFormatter={formatPersianYear}
                  />
                  <YAxis
                    stroke="#9ca3af"
                    fontSize={12}
                    tickMargin={12}
                    tickLine={false}
                    axisLine={false}
                    tickFormatter={(value) => formatNumber(value)}
                  />
                  <Tooltip cursor={false} content={<></>} />

                  {/* ✅ Use gradient for fill */}
                  <Area
                    type="monotone"
                    dataKey="value"
                    stroke="#3AEA83"
                    fill="url(#fillDesktop)"
                    strokeWidth={2}
                    activeDot={({ cx, cy, payload }) => (
                      <g>
                        {/* Small circle */}
                        <circle
                          cx={cx}
                          cy={cy}
                          r={5}
                          fill="#3AEA83"
                          stroke="#fff"
                          strokeWidth={2}
                        />
                        {/* Year label above point */}
                        <text
                          x={cx}
                          y={cy - 10}
                          textAnchor="middle"
                          fontSize={12}
                          fontWeight="bold"
                          fill="#3AEA83"
                        >
                          {formatPersianYear(payload.year)}
                        </text>
                      </g>
                    )}
                  />
                </AreaChart>
              </ResponsiveContainer>
            ) : (
              <div className="flex items-center justify-center h-full text-gray-400 font-persian">
                داده‌ای برای نمایش وجود ندارد
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default InfoPanel;