'use client';

import React, { useEffect, useState, useCallback } from 'react';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import apis from '@/utils/apis';
import { AnalyticsFilter } from '@/utils/enums';
import { currency } from '@/lib/utils';
import { TrendingUp } from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip
} from 'recharts';

dayjs.extend(utc);
dayjs.extend(timezone);

const formatAmount = (val: number | string | undefined | null) => {
  if (val === undefined || val === null || isNaN(Number(val))) return '0';
  const num = Number(val);
  return num.toLocaleString('en-IN', {
    maximumFractionDigits: 2,
    minimumFractionDigits: num % 1 === 0 ? 0 : 2
  });
};

const SalesAnalyticsChart = () => {
  const [salesFilter, setSalesFilter] = useState<AnalyticsFilter>(AnalyticsFilter.MONTHLY);
  const [customStartDate, setCustomStartDate] = useState<string>(
    dayjs().subtract(13, 'day').format('YYYY-MM-DD')
  );
  const [customEndDate, setCustomEndDate] = useState<string>(
    dayjs().format('YYYY-MM-DD')
  );
  const [salesAnalytics, setSalesAnalytics] = useState<any>(null);
  const [salesAnalyticsLoading, setSalesAnalyticsLoading] = useState<boolean>(false);

  const convertChartDataToLocal = useCallback((chartData: any[], filter: string) => {
    if (!chartData || !Array.isArray(chartData)) return chartData;
    return chartData.map((item: any) => {
      if (!item || !item.label) return item;
      const labelStr = String(item.label).trim();

      const match = labelStr.match(/^(\d{1,2}):(\d{2})$/);
      if (match) {
        const hours = parseInt(match[1], 10);
        const minutes = match[2];
        if (!isNaN(hours)) {
          const period = hours >= 12 ? 'PM' : 'AM';
          const formattedHour = hours % 12 === 0 ? 12 : hours % 12;
          return {
            ...item,
            label: `${String(formattedHour).padStart(2, '0')}:${minutes} ${period}`
          };
        }
      }

      if (filter === 'daily' && labelStr.includes('T') && dayjs(labelStr).isValid()) {
        return {
          ...item,
          label: dayjs.utc(labelStr).format('hh:mm A')
        };
      }

      return item;
    });
  }, []);

  const fetchSalesAnalytics = useCallback(
    async (filter: AnalyticsFilter, startDate?: string, endDate?: string) => {
      setSalesAnalyticsLoading(true);
      try {
        let query = `filter=${filter}`;
        if (filter === AnalyticsFilter.CUSTOM) {
          if (startDate && endDate) {
            const utcStart = `${startDate}T00:00:00.000Z`;
            const utcEnd = `${endDate}T23:59:59.999Z`;
            query += `&start_date=${utcStart}&end_date=${utcEnd}`;
          }
        }
        const res: any = await apis.Report.getSalesAnalytics(query);
        const data =
          res?.sales_analytics ?? res?.data?.sales_analytics ?? res?.data ?? res;
        if (data?.chart_data) {
          data.chart_data = convertChartDataToLocal(data.chart_data, filter);
        }
        setSalesAnalytics(data || null);
      } catch (error) {
        console.error('Error fetching sales analytics:', error);
      } finally {
        setSalesAnalyticsLoading(false);
      }
    },
    [convertChartDataToLocal]
  );

  const hasData = React.useMemo(() => {
    if (!salesAnalytics?.chart_data || !Array.isArray(salesAnalytics.chart_data) || salesAnalytics.chart_data.length === 0) {
      return false;
    }
    return salesAnalytics.chart_data.some((item: any) => {
      const sales = Number(item.sales ?? 0);
      const count = Number(item.orders_count ?? 0);
      return sales > 0 || count > 0;
    });
  }, [salesAnalytics]);

  useEffect(() => {
    fetchSalesAnalytics(salesFilter, customStartDate, customEndDate);
  }, [salesFilter, customStartDate, customEndDate, fetchSalesAnalytics]);

  return (
    <div id="sales-analytics" className="w-full bg-white rounded-2xl p-6 border border-[#F0F0F2] shadow-sm flex flex-col justify-between min-h-[380px] scroll-mt-6">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-3 border-b border-gray-100">
        <div>
          <h3 className="text-base font-bold text-gray-900">Sales Analytics</h3>
        </div>

        <div className="flex items-center flex-wrap gap-2.5">
          {salesFilter === AnalyticsFilter.CUSTOM && (
            <div className="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-1.5 text-xs text-gray-700">
              <div className="flex items-center gap-1">
                <span className="text-gray-400">From:</span>
                <input
                  type="date"
                  value={customStartDate}
                  max={customEndDate}
                  onChange={(e) => setCustomStartDate(e.target.value)}
                  className="bg-transparent font-medium outline-none cursor-pointer text-gray-800"
                />
              </div>
              <span className="text-gray-300">|</span>
              <div className="flex items-center gap-1">
                <span className="text-gray-400">To:</span>
                <input
                  type="date"
                  value={customEndDate}
                  min={customStartDate}
                  onChange={(e) => setCustomEndDate(e.target.value)}
                  className="bg-transparent font-medium outline-none cursor-pointer text-gray-800"
                />
              </div>
            </div>
          )}

          <Select
            value={salesFilter}
            onValueChange={(val: AnalyticsFilter) => setSalesFilter(val)}
          >
            <SelectTrigger className="w-[125px] h-9 text-xs font-semibold rounded-xl border border-gray-200 bg-white hover:border-gray-300">
              <SelectValue placeholder="Select filter" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={AnalyticsFilter.DAILY}>Daily</SelectItem>
              <SelectItem value={AnalyticsFilter.WEEKLY}>Weekly</SelectItem>
              <SelectItem value={AnalyticsFilter.MONTHLY}>Monthly</SelectItem>
              <SelectItem value={AnalyticsFilter.YEARLY}>Yearly</SelectItem>
              <SelectItem value={AnalyticsFilter.CUSTOM}>Custom</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="h-[280px] w-full mt-4 relative">
        {salesAnalyticsLoading && (
          <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px] flex items-center justify-center z-10">
            <div className="w-6 h-6 border-2 border-[var(--primary-brand)] border-t-transparent rounded-full animate-spin"></div>
          </div>
        )}
        {!hasData && !salesAnalyticsLoading ? (
          <div className="h-full w-full flex flex-col items-center justify-center text-gray-400 text-sm font-medium bg-gray-50/50 rounded-xl border border-dashed border-gray-200 gap-2">
            <TrendingUp className="w-9 h-9 text-gray-300" />
            <span>No data available</span>
          </div>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart
              data={salesAnalytics?.chart_data ?? []}
              margin={{ top: 10, right: 10, left: -20, bottom: 20 }}
            >
              <defs>
                <linearGradient id="colorSales" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--primary-brand)" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="var(--primary-brand)" stopOpacity={0.0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F3F4F6" />
              <XAxis
                dataKey="label"
                axisLine={false}
                tickLine={false}
                interval={salesFilter === AnalyticsFilter.DAILY ? 2 : salesFilter === AnalyticsFilter.MONTHLY ? 1 : 0}
                angle={-45}
                textAnchor="end"
                tick={{ fill: '#9CA3AF', fontSize: 10, fontWeight: 500 }}
                height={50}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                tick={{ fill: '#9CA3AF', fontSize: 12, fontWeight: 500 }}
                domain={[0, 'auto']}
                tickCount={5}
              />
              <Tooltip
                content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    const itemData = payload[0]?.payload;
                    return (
                      <div className="bg-white p-3 rounded-xl border border-gray-100 shadow-md text-xs space-y-1">
                        <div className="font-semibold text-gray-700">{label || itemData?.label}</div>
                        <div className="text-[var(--primary-brand)] font-bold">
                          Sales: {currency}{formatAmount(itemData?.sales ?? 0)}
                        </div>
                        <div className="text-gray-500">
                          Orders: {itemData?.orders_count ?? 0}
                        </div>
                      </div>
                    );
                  }
                  return null;
                }}
              />
              <Area
                type="monotone"
                dataKey="sales"
                stroke="var(--primary-brand)"
                strokeWidth={3}
                fillOpacity={1}
                fill="url(#colorSales)"
              />
            </AreaChart>
          </ResponsiveContainer>
        )}
      </div>
    </div>
  );
};

export default SalesAnalyticsChart;