'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 { useGlobalContext } from '@/context/Provider';
import { BarChart3 } from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

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

const ALL_ORDER_TYPES = [
  { key: 'delivery', label: 'Delivery', color: '#FF7400' },
  { key: 'takeaway', label: 'Takeaway', color: '#FFC233' },
  { key: 'pos', label: 'POS', color: '#4CA8F0' },
  { key: 'catering', label: 'Catering', color: '#EF4444' },
  { key: 'slot_booking', label: 'Slot Booking', color: '#9CA3AF' },
];

const OrdersAnalyticsChart = () => {
  const { userInfo } = useGlobalContext();

  const isFood = React.useMemo(() => {
    const rawType =
      userInfo?.restaurant_id?.type ||
      userInfo?.restaurant_id?.restaurant_type ||
      userInfo?.type ||
      userInfo?.restaurant_type;
    return rawType ? rawType === 'food' : true;
  }, [userInfo]);

  const orderTypes = React.useMemo(() => {
    if (!isFood) {
      return ALL_ORDER_TYPES.filter(
        (t) => t.key !== 'catering' && t.key !== 'slot_booking'
      );
    }
    return ALL_ORDER_TYPES;
  }, [isFood]);
  const [filter, setFilter] = useState<AnalyticsFilter>(AnalyticsFilter.WEEKLY);
  const [customStartDate, setCustomStartDate] = useState<string>(
    dayjs().subtract(13, 'day').format('YYYY-MM-DD')
  );
  const [customEndDate, setCustomEndDate] = useState<string>(
    dayjs().format('YYYY-MM-DD')
  );
  const [analytics, setAnalytics] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(false);

  const convertChartLabelsToLocal = useCallback((chartData: any[], currentFilter: 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 (currentFilter === 'daily' && labelStr.includes('T') && dayjs(labelStr).isValid()) {
        return {
          ...item,
          label: dayjs.utc(labelStr).format('hh:mm A')
        };
      }

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

  const fetchAnalytics = useCallback(
    async (f: AnalyticsFilter, startDate?: string, endDate?: string) => {
      setLoading(true);
      try {
        let query = `filter=${f}`;
        if (f === 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.getOrdersAnalytics(query);
        const data =
          res?.orders_analytics ?? res?.data?.orders_analytics ?? res?.data ?? res;
        if (data?.chart_data) {
          data.chart_data = convertChartLabelsToLocal(data.chart_data, f);
        }
        setAnalytics(data || null);
      } catch (error) {
        console.error('Error fetching orders analytics:', error);
      } finally {
        setLoading(false);
      }
    },
    [convertChartLabelsToLocal]
  );

  const hasData = React.useMemo(() => {
    if (!analytics?.chart_data || !Array.isArray(analytics.chart_data) || analytics.chart_data.length === 0) {
      return false;
    }
    return analytics.chart_data.some((item: any) => {
      const total = Number(item.total_orders ?? 0);
      if (total > 0) return true;
      return orderTypes.some((t) => Number(item[t.key] ?? 0) > 0);
    });
  }, [analytics, orderTypes]);

  useEffect(() => {
    fetchAnalytics(filter, customStartDate, customEndDate);
  }, [filter, customStartDate, customEndDate, fetchAnalytics]);

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

        <div className="flex items-center flex-wrap gap-2.5">
          {filter === 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={filter}
            onValueChange={(val: AnalyticsFilter) => setFilter(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-[320px] w-full mt-4 relative">
        {loading && (
          <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 && !loading ? (
          <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">
            <BarChart3 className="w-9 h-9 text-gray-300" />
            <span>No data available</span>
          </div>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={analytics?.chart_data ?? []}
            margin={{ top: 10, right: 10, left: -20, bottom: 20 }}
          >
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F3F4F6" />
            <XAxis
              dataKey="label"
              axisLine={false}
              tickLine={false}
              interval={filter === AnalyticsFilter.DAILY ? 2 : filter === 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}
              allowDecimals={false}
            />
            <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-gray-800 font-bold">
                        Total: {itemData?.total_orders ?? 0}
                      </div>
                      {orderTypes.map((t) =>
                        (itemData?.[t.key] ?? 0) > 0 ? (
                          <div key={t.key} className="flex items-center gap-1.5">
                            <span className="w-2 h-2 rounded-full inline-block" style={{ backgroundColor: t.color }} />
                            <span style={{ color: t.color }} className="font-medium">
                              {t.label}: {itemData[t.key]}
                            </span>
                          </div>
                        ) : null
                      )}
                    </div>
                  );
                }
                return null;
              }}
            />
            <Legend
              verticalAlign="bottom"
              wrapperStyle={{ paddingTop: 8, fontSize: 11 }}
              formatter={(value: string) => (
                <span className="text-gray-500 text-[11px]">{value}</span>
              )}
            />
            {orderTypes.map((t) => (
              <Bar
                key={t.key}
                dataKey={t.key}
                name={t.label}
                stackId="orders"
                fill={t.color}
                radius={[0, 0, 0, 0]}
              />
            ))}
          </BarChart>
        </ResponsiveContainer>
        )}
      </div>
    </div>
  );
};

export default OrdersAnalyticsChart;