"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import { Select } from "antd";
import { useGetAllPCSummaryQuery } from "@/app/_globalRedux/services/passengerCount";
import moment from "moment";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
const { Option } = Select;

interface ViewProps {
  serviceId: string | null;
}

const View = ({ serviceId }: ViewProps) => {
  const [activeTab, setActiveTab] = useState("Yesterday");
  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
  const [selectedCategory, setSelectedCategory] = useState("Adult");

  const tabs = ["Yesterday", "Three Days", "Last Week", "This Month"];

  // Calculate date ranges based on active tab
  useEffect(() => {
    const today = moment();
    let startDate = "";
    let endDate = today.format("YYYY-MM-DD");

    switch (activeTab) {
      case "Yesterday":
        startDate = today.subtract(1, "day").format("YYYY-MM-DD");
        break;
      case "Three Days":
        startDate = today.subtract(3, "days").format("YYYY-MM-DD");
        break;
      case "Last Week":
        startDate = today.subtract(7, "days").format("YYYY-MM-DD");
        break;
      case "This Month":
        startDate = today.subtract(30, "days").format("YYYY-MM-DD");
        break;
      default:
        startDate = today.subtract(1, "day").format("YYYY-MM-DD");
    }

    setDateRange({ startDate, endDate });
  }, [activeTab]);

  // Fetch data for different time periods
  const yesterdayRange = {
    startDate: moment().subtract(1, "day").format("YYYY-MM-DD"),
    endDate: moment().subtract(1, "day").format("YYYY-MM-DD"),
  };

  const lastWeekRange = {
    startDate: moment().subtract(7, "days").format("YYYY-MM-DD"),
    endDate: moment().subtract(1, "day").format("YYYY-MM-DD"),
  };

  const thisMonthRange = {
    startDate: moment().startOf("month").format("YYYY-MM-DD"),
    endDate: moment().format("YYYY-MM-DD"),
  };

  const lastMonthRange = {
    startDate: moment()
      .subtract(1, "month")
      .startOf("month")
      .format("YYYY-MM-DD"),
    endDate: moment().subtract(1, "month").endOf("month").format("YYYY-MM-DD"),
  };

  // Fetch data for yesterday
  const { data: yesterdayData } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: yesterdayRange.startDate,
      endDate: yesterdayRange.endDate,
    },
    { skip: !serviceId }
  );

  // Fetch data for last week
  const { data: lastWeekData } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: lastWeekRange.startDate,
      endDate: lastWeekRange.endDate,
    },
    { skip: !serviceId }
  );

  // Fetch data for this month
  const { data: thisMonthData } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: thisMonthRange.startDate,
      endDate: thisMonthRange.endDate,
    },
    { skip: !serviceId }
  );

  // Fetch data for last month
  const { data: lastMonthData } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: lastMonthRange.startDate,
      endDate: lastMonthRange.endDate,
    },
    { skip: !serviceId }
  );

  // Define specific dates for chart
  const chartDates = [
    { date: "2025-10-02", label: "2 Oct" },
    { date: "2025-10-20", label: "20 Oct" },
    { date: "2025-10-22", label: "22 Oct" },
    { date: "2025-10-23", label: "23 Oct" },
    { date: "2025-10-27", label: "27 Oct" },
  ];

  // Fetch data for each specific date
  const { data: oct2Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: "2025-10-02",
      endDate: "2025-10-02",
    },
    { skip: !serviceId }
  );

  const { data: oct20Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: "2025-10-20",
      endDate: "2025-10-20",
    },
    { skip: !serviceId }
  );

  const { data: oct22Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: "2025-10-22",
      endDate: "2025-10-22",
    },
    { skip: !serviceId }
  );

  const { data: oct23Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: "2025-10-23",
      endDate: "2025-10-23",
    },
    { skip: !serviceId }
  );

  const { data: oct27Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: "2025-10-27",
      endDate: "2025-10-27",
    },
    { skip: !serviceId }
  );

  // Generate last 7 days dates for trend analysis
  const last7Days = Array.from({ length: 7 }, (_, i) => {
    const date = moment().subtract(i, "days").format("YYYY-MM-DD");
    return date;
  }).reverse();

  // Fetch data for last 7 days
  const { data: day1Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[0],
      endDate: last7Days[0],
    },
    { skip: !serviceId }
  );

  const { data: day2Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[1],
      endDate: last7Days[1],
    },
    { skip: !serviceId }
  );

  const { data: day3Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[2],
      endDate: last7Days[2],
    },
    { skip: !serviceId }
  );

  const { data: day4Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[3],
      endDate: last7Days[3],
    },
    { skip: !serviceId }
  );

  const { data: day5Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[4],
      endDate: last7Days[4],
    },
    { skip: !serviceId }
  );

  const { data: day6Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[5],
      endDate: last7Days[5],
    },
    { skip: !serviceId }
  );

  const { data: day7Data } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: last7Days[6],
      endDate: last7Days[6],
    },
    { skip: !serviceId }
  );

  // Fetch passenger count data for main cards
  const { data: passengerData } = useGetAllPCSummaryQuery(
    {
      vehId: parseInt(serviceId!),
      startDate: dateRange.startDate,
      endDate: dateRange.endDate,
    },
    {
      skip: !serviceId || !dateRange.startDate || !dateRange.endDate,
    }
  );

  // Calculate totals from API data
  const calculateTotals = (data: any) => {
    if (!data?.list || data.list.length === 0) {
      return {
        totalCustomers: 0,
        totalMale: 0,
        totalFemale: 0,
        totalChildren: 0,
      };
    }

    return data.list.reduce(
      (totals: any, item: any) => ({
        totalCustomers: totals.totalCustomers + item.total_pc,
        totalMale: totals.totalMale + item.men_count,
        totalFemale: totals.totalFemale + item.women_count,
        totalChildren: totals.totalChildren + item.children_count,
      }),
      { totalCustomers: 0, totalMale: 0, totalFemale: 0, totalChildren: 0 }
    );
  };

  const totals = calculateTotals(passengerData);
  const yesterdayTotals = calculateTotals(yesterdayData);
  const lastWeekTotals = calculateTotals(lastWeekData);
  const thisMonthTotals = calculateTotals(thisMonthData);
  const lastMonthTotals = calculateTotals(lastMonthData);

  // Calculate totals for chart dates
  const oct2Totals = calculateTotals(oct2Data);
  const oct20Totals = calculateTotals(oct20Data);
  const oct22Totals = calculateTotals(oct22Data);
  const oct23Totals = calculateTotals(oct23Data);
  const oct27Totals = calculateTotals(oct27Data);

  // Prepare chart data
  const chartData = [
    {
      date: "2 Oct",
      totalPassengers: oct2Totals.totalCustomers,
      male: oct2Totals.totalMale,
      female: oct2Totals.totalFemale,
      children: oct2Totals.totalChildren,
    },
    {
      date: "20 Oct",
      totalPassengers: oct20Totals.totalCustomers,
      male: oct20Totals.totalMale,
      female: oct20Totals.totalFemale,
      children: oct20Totals.totalChildren,
    },
    {
      date: "22 Oct",
      totalPassengers: oct22Totals.totalCustomers,
      male: oct22Totals.totalMale,
      female: oct22Totals.totalFemale,
      children: oct22Totals.totalChildren,
    },
    {
      date: "23 Oct",
      totalPassengers: oct23Totals.totalCustomers,
      male: oct23Totals.totalMale,
      female: oct23Totals.totalFemale,
      children: oct23Totals.totalChildren,
    },
    {
      date: "27 Oct",
      totalPassengers: oct27Totals.totalCustomers,
      male: oct27Totals.totalMale,
      female: oct27Totals.totalFemale,
      children: oct27Totals.totalChildren,
    },
  ];

  // Calculate totals for last 7 days trend analysis
  const day1Totals = calculateTotals(day1Data);
  const day2Totals = calculateTotals(day2Data);
  const day3Totals = calculateTotals(day3Data);
  const day4Totals = calculateTotals(day4Data);
  const day5Totals = calculateTotals(day5Data);
  const day6Totals = calculateTotals(day6Data);
  const day7Totals = calculateTotals(day7Data);

  // Prepare trend analysis chart data (last 7 days)
  const trendData = [
    {
      date: moment(last7Days[0]).format("MMM DD"),
      totalPassengers: day1Totals.totalCustomers,
    },
    {
      date: moment(last7Days[1]).format("MMM DD"),
      totalPassengers: day2Totals.totalCustomers,
    },
    {
      date: moment(last7Days[2]).format("MMM DD"),
      totalPassengers: day3Totals.totalCustomers,
    },
    {
      date: moment(last7Days[3]).format("MMM DD"),
      totalPassengers: day4Totals.totalCustomers,
    },
    {
      date: moment(last7Days[4]).format("MMM DD"),
      totalPassengers: day5Totals.totalCustomers,
    },
    {
      date: moment(last7Days[5]).format("MMM DD"),
      totalPassengers: day6Totals.totalCustomers,
    },
    {
      date: moment(last7Days[6]).format("MMM DD"),
      totalPassengers: day7Totals.totalCustomers,
    },
  ];

  // Function to get display value based on selected category
  const getDisplayValue = (data: any) => {
    switch (selectedCategory) {
      case "Passengers Passed By":
        return 0;
      case "Adult":
        return data.totalMale + data.totalFemale;
      case "Children":
        return data.totalChildren;
      case "Incoming Batch":
      case "Outgoing Batch":
        return 0;
      default:
        return data.totalMale + data.totalFemale;
    }
  };

  // Calculate dates for passenger flow cards
  const getCardDates = () => {
    const now = moment();
    return {
      yesterday: {
        start: moment().subtract(1, "day").format("YYYY/MM/DD"),
        end: moment().subtract(1, "day").format("YYYY/MM/DD"),
      },
      lastWeek: {
        start: moment().subtract(7, "days").format("YYYY/MM/DD"),
        end: moment().subtract(1, "day").format("YYYY/MM/DD"),
      },
      thisMonth: {
        start: moment().startOf("month").format("YYYY/MM/DD"),
        end: moment().format("YYYY/MM/DD"),
      },
      lastMonth: {
        start: moment()
          .subtract(1, "month")
          .startOf("month")
          .format("YYYY/MM/DD"),
        end: moment().subtract(1, "month").endOf("month").format("YYYY/MM/DD"),
      },
    };
  };

  const cardDates = getCardDates();

  useEffect(() => {
    if (serviceId) {
      console.log("Service ID received:", serviceId);
    }
    if (passengerData) {
      console.log("Passenger data:", passengerData);
    }
  }, [serviceId, passengerData]);

  const StatCard = ({
    title,
    value,
    iconBg,
    iconSymbol,
  }: {
    title: string;
    value: string;
    iconBg: string;
    iconSymbol: string;
  }) => (
    <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-100">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-gray-700 text-md font-medium">{title}</h3>
        <div
          className={`w-12 h-12 rounded-lg flex items-center justify-center ${iconBg}`}
        >
          <Image
            src={iconSymbol}
            alt={title}
            width={24}
            height={24}
            className="text-white"
          />
        </div>
      </div>
      <div
        className="text-5xl font-semibold text-gray-900 mb-2"
        // style={{ fontFamily: "Ruwudu" }}
      >
        {value}
      </div>
    </div>
  );

  return (
    <div className="p-6 bg-gray-50 overflow-y-scroll">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900 mb-2">
          Passenger Counting System
        </h1>
      </div>

      {/* Tabs */}
      <div className="mb-8">
        <div className="flex space-x-8 border-b border-gray-200">
          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`pb-4 px-1 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab
                  ? "text-green-500 border-green-500"
                  : "text-gray-500 border-transparent hover:text-gray-700"
              }`}
            >
              {tab}
            </button>
          ))}
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 bg-[#F2FCF8] p-5 rounded-md">
        <StatCard
          title="Customers Enter"
          value={totals.totalCustomers.toLocaleString()}
          iconBg="bg-[#5DDAAB]"
          iconSymbol="/assets/images/Persons.png"
        />

        <StatCard
          title="Male"
          value={totals.totalMale.toLocaleString()}
          iconBg="bg-[#43AFFF]"
          iconSymbol="/assets/images/male.png"
        />

        <StatCard
          title="Female"
          value={totals.totalFemale.toLocaleString()}
          iconBg="bg-[#F87CFA]"
          iconSymbol="/assets/images/female.png"
        />

        <StatCard
          title="Children"
          value={totals.totalChildren.toLocaleString()}
          iconBg="bg-[#FFDC52]"
          iconSymbol="/assets/images/child.png"
        />
      </div>

      {/* Passenger Flow RPI Section */}
      <div className="mt-8">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-[#4FB090] rounded-full"></div>
            <h2
              className="text-lg font-semibold text-gray-700"
              style={{ fontFamily: "sans-serif" }}
            >
              Passenger Flow RPI
            </h2>
          </div>
          <Select
            defaultValue="Adult"
            style={{ width: 200 }}
            size="small"
            value={selectedCategory}
            onChange={(value) => setSelectedCategory(value)}
          >
            <Option value="Passengers Passed By">Passengers Passed By</Option>
            <Option value="Incoming Batch">Incoming Batch</Option>
            <Option value="Outgoing Batch">Outgoing Batch</Option>
            <Option value="Adult">Adult</Option>
            <Option value="Children">Children</Option>
          </Select>
        </div>

        <div className="border border-gray-200 mt-2 mb-4" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {/* Yesterday's passenger flow */}
          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
            <div className="text-gray-400 text-sm mb-4">
              Yesterday&apos;s passenger flow
            </div>
            <div className="text-4xl font-semibold text-gray-900 mb-4">
              {getDisplayValue(yesterdayTotals).toLocaleString()}
            </div>
            <div className="text-xs text-gray-400">
              {cardDates.yesterday.start}|00:00:00-23:59:59
            </div>
          </div>

          {/* Last week's passenger flow */}
          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
            <div className="text-gray-400 text-sm mb-4">
              Last week&apos;s passenger flow
            </div>
            <div className="text-4xl font-semibold text-gray-900 mb-4">
              {getDisplayValue(lastWeekTotals).toLocaleString()}
            </div>
            <div className="text-xs text-gray-400">
              {cardDates.lastWeek.start}|00:00:00-{cardDates.lastWeek.end}
              |23:59:59
            </div>
          </div>

          {/* This month's passenger flow */}
          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
            <div className="text-gray-400 text-sm mb-4">
              This month&apos;s passenger flow
            </div>
            <div className="text-4xl font-semibold text-gray-900 mb-4">
              {getDisplayValue(thisMonthTotals).toLocaleString()}
            </div>
            <div className="text-xs text-gray-400">
              {cardDates.thisMonth.start}|00:00:00-{cardDates.thisMonth.end}
              |23:59:59
            </div>
          </div>

          {/* Last month's passenger flow */}
          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 text-center">
            <div className="text-gray-400 text-sm mb-4">
              Last month&apos;s passenger flow
            </div>
            <div className="text-4xl font-semibold text-gray-900 mb-4">
              {getDisplayValue(lastMonthTotals).toLocaleString()}
            </div>
            <div className="text-xs text-gray-400">
              {cardDates.lastMonth.start}|00:00:00-{cardDates.lastMonth.end}
              |23:59:59
            </div>
          </div>
        </div>
      </div>

      {/* Holiday Passenger Flow Chart */}
      <div className="mt-8">
        <div className="flex items-center mb-4">
          <div className="w-2 h-2 bg-[#4FB090] rounded-full mr-2"></div>
          <h2 className="text-lg font-semibold text-gray-700">
            Holiday Passenger Flow
          </h2>
        </div>
        <div className="border border-gray-200 mt-2 mb-4" />

        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={chartData}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}
                barCategoryGap="40%"
              >
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis
                  dataKey="date"
                  tick={{ fontSize: 12, fill: "#666" }}
                  axisLine={{ stroke: "#e0e0e0" }}
                />
                <YAxis
                  tick={{ fontSize: 12, fill: "#666" }}
                  axisLine={{ stroke: "#e0e0e0" }}
                  label={{
                    value: "Passenger Count",
                    angle: -90,
                    position: "insideLeft",
                  }}
                />
                <Tooltip
                  formatter={(value, name) => [
                    value,
                    name === "totalPassengers" ? "Total Passengers" : name,
                  ]}
                  labelStyle={{ color: "#333" }}
                  contentStyle={{
                    backgroundColor: "#fff",
                    border: "1px solid #e0e0e0",
                    borderRadius: "4px",
                    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
                  }}
                />
                <Bar
                  dataKey="totalPassengers"
                  fill="#FF8E8D"
                  radius={[4, 4, 0, 0]}
                  name="Total Passengers"
                  maxBarSize={60}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>

          {/* Chart Legend */}
          <div className="mt-4 flex justify-center">
            <div className="flex items-center space-x-6">
              <div className="flex items-center">
                <div className="w-3 h-3 bg-[#FF8E8D] rounded mr-2"></div>
                <span className="text-sm text-gray-600">Total Passengers</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Trend Analysis Chart */}
      <div className="mt-8">
        <div className="flex items-center mb-4">
          <div className="w-2 h-2 bg-[#4FB090] rounded-full mr-2"></div>
          <h2 className="text-lg font-semibold text-gray-700">
            Trend Analysis
          </h2>
        </div>
        <div className="border border-gray-200 mt-2 mb-4" />

        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={trendData}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}
                barCategoryGap="30%"
              >
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis
                  dataKey="date"
                  tick={{ fontSize: 12, fill: "#666" }}
                  axisLine={{ stroke: "#e0e0e0" }}
                />
                <YAxis
                  tick={{ fontSize: 12, fill: "#666" }}
                  axisLine={{ stroke: "#e0e0e0" }}
                  label={{
                    value: "Passenger Count",
                    angle: -90,
                    position: "insideLeft",
                  }}
                />
                <Tooltip
                  formatter={(value, name) => [value, "Total Passengers"]}
                  labelStyle={{ color: "#333" }}
                  contentStyle={{
                    backgroundColor: "#fff",
                    border: "1px solid #e0e0e0",
                    borderRadius: "4px",
                    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
                  }}
                />
                <Bar
                  dataKey="totalPassengers"
                  fill="#2B6AE5"
                  radius={[4, 4, 0, 0]}
                  name="Total Passengers"
                  maxBarSize={50}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>

          {/* Chart Legend */}
          <div className="mt-4 flex justify-center">
            <div className="flex items-center space-x-6">
              <div className="flex items-center">
                <div className="w-3 h-3 bg-[#2B6AE5] rounded mr-2"></div>
                <span className="text-sm text-gray-600">Last 7 Days Trend</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default View;