'use client';
import DashboardLayout from '@/app/dashboard/layout';
import { useGlobalContext } from '@/context/Provider';
import { useEffect, useState, useRef, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import dayjs from 'dayjs';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { currency } from '@/lib/utils';

 enum OrderSubscriptionStatus {
  Active = 'active',
  Pause = 'pause',
  Cancel = 'cancel',
}

interface SubscriptionItem {
  food_id: string;
  name: string;
  quantity: number;
  price: number;
  image?: string;
}

interface Customer {
  name: string;
  email: string;
  phone: string;
  image?: string;
}

interface Subscription {
  _id: string;
  subscription_id: string;
  createdAt: string;
  total_amount: number;
  subscription_status: OrderSubscriptionStatus;
  subscription_type: string;
  subscription_weekly: string[];
  subscription_monthly: number[];
  items: SubscriptionItem[];
  customer?: Customer;
  delivery_address?: string;
}

const getStatusColor = (status: OrderSubscriptionStatus): string => {
  switch (status) {
    case OrderSubscriptionStatus.Pause:
      return 'bg-green-500';
    default:
      return 'bg-gray-400';
  }
};

const DeliveredSubscriptionsPaused = () => {
  const { userInfo } = useGlobalContext();
  const searchParams = useSearchParams();

  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
  const [page, setPage] = useState(Number(searchParams.get('page')) || 1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [updatingId, setUpdatingId] = useState<string | null>(null);
  const limit = 15;

  const mapApiToSubscription = (data: any[]): Subscription[] => {
    return data
      .filter((sub) => sub.subscription_status === OrderSubscriptionStatus.Pause)
      .map((sub) => ({
        _id: sub._id,
        subscription_id: sub._id.slice(-6),
        createdAt: sub.createdAt,
        total_amount: Number(sub.total_amount),
        subscription_status: sub.subscription_status,
        subscription_type: sub.subscription_type,
        subscription_weekly: sub.subscription_weekly || [],
        subscription_monthly: sub.subscription_monthly || [],
        items: sub.cart_items.map((item: any) => ({
          food_id: item.food_id,
          name: item.name,
          quantity: item.no_of_quantity || 1,
          price: Number(item.price),
          image: item.image || undefined,
        })),
        customer: sub.customer_id ? {
          name: sub.customer_id.name,
          email: sub.customer_id.email,
          phone: `${sub.customer_id.country_code || ''} ${sub.customer_id.phone || ''}`.trim(),
          image: sub.customer_id.image || undefined,
        } : undefined,
        delivery_address: sub.delivery_address?.name || '',
      }));
  };

  const getSubscriptions = async (currentPage: number, append = false) => {
    try {
      setLoading(true);

      const params = new URLSearchParams({
        status: OrderSubscriptionStatus.Pause,
        page: currentPage.toString(),
        limit: limit.toString(),
      });

      const res = await apis.Subscriptions.getSubscriptions(params.toString());
      const data = mapApiToSubscription(res?.data || []);

      if (append) {
        setSubscriptions((prev) => [...prev, ...data]);
      } else {
        setSubscriptions(data);
      }

      setHasMore(data.length === limit);
    } catch (error) {
      console.error('Error fetching subscriptions:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (userInfo?._id) getSubscriptions(page, false);
  }, [userInfo]);

  const observer = useRef<IntersectionObserver | null>(null);
  const lastItemRef = useCallback(
    (node: any) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          const nextPage = page + 1;
          setPage(nextPage);
          getSubscriptions(nextPage, true);
        }
      });

      if (node) observer.current.observe(node);
    },
    [loading, hasMore, page]
  );

  const handleCancelSubscription = async (id: string) => {
    try {
      setUpdatingId(id);
            const payload = {
        id: id,
        subscription_status: 'cancel'
      };
      
      await apis.Subscriptions.cancelSubscription(payload);
      setSubscriptions((prev) => prev.filter((sub) => sub._id !== id));
    } catch (error) {
      console.error('Failed to cancel subscription:', error);
    } finally {
      setUpdatingId(null);
    }
  };

  return (
    <div className="grid h-[90vh] grid-cols-1 gap-6 overflow-y-auto bg-gray-50 p-4 md:grid-cols-2 lg:grid-cols-3">
      {/* Show message if no subscriptions and not loading */}
      {subscriptions.length === 0 && !loading && (
        <p className="col-span-full text-center text-gray-500 mt-20 text-lg">
          No paused subscriptions found.
        </p>
      )}

      {subscriptions.map((sub, index) => {
        const isLast = subscriptions.length === index + 1;
        return (
          <div
            key={sub._id}
            ref={isLast ? lastItemRef : null}
            className="border border-gray-200 rounded-2xl shadow-sm p-5 bg-white"
          >
            {/* Header */}
            <div className="flex justify-between items-center mb-4 pb-3 border-b border-gray-100">
              <h3 className="font-bold text-base text-gray-900">
                Subscription ID: {sub.subscription_id}
              </h3>
              <span
                className={`text-xs px-2 py-1 rounded-full ${getStatusColor(
                  sub.subscription_status
                )} text-white capitalize`}
              >
                {sub.subscription_status}
              </span>
            </div>

            {/* Dates and total */}
            <div className="mb-4 space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">Created</span>
                <span className="text-sm font-semibold text-gray-900">
                  {dayjs(sub.createdAt).format('DD MMM YYYY')}
                </span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">Total Amount</span>
                <span className="text-sm font-semibold text-gray-900">
                  {currency}{sub.total_amount.toFixed(2)}
                </span>
              </div>
            </div>

            {/* Customer Details */}
            {sub.customer && (
              <div className="mb-4 p-3 rounded-xl bg-gray-50 border border-gray-100 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden flex-shrink-0 flex items-center justify-center">
                  {sub.customer.image ? (
                    <img
                      src={sub.customer.image.startsWith('http') ? sub.customer.image : (BUCKET_ROOT + sub.customer.image)}
                      alt={sub.customer.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <span className="text-sm font-semibold text-gray-600">
                      {sub.customer.name.slice(0, 2).toUpperCase()}
                    </span>
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-semibold text-gray-900 truncate">
                    {sub.customer.name}
                  </p>
                  <p className="text-xs text-gray-500 truncate">
                    {sub.customer.email}
                  </p>
                  <p className="text-xs text-gray-500 truncate font-medium">
                    {sub.customer.phone}
                  </p>
                </div>
              </div>
            )}

            {/* Delivery Address */}
            {sub.delivery_address && (
              <div className="mb-4 text-xs text-gray-500">
                <span className="font-semibold text-gray-700 block mb-1">Delivery Address:</span>
                <p className="line-clamp-2 bg-gray-50 p-2.5 rounded-lg border border-gray-100">{sub.delivery_address}</p>
              </div>
            )}

            {/* Subscription type & days */}
            <div className="mb-3">
              <h4 className="text-sm font-semibold text-gray-900 mb-2 capitalize">
                {sub.subscription_type} Order
              </h4>
              <div className="flex gap-2 mb-3 flex-wrap">
                {sub.subscription_weekly.map((day, i) => (
                  <span
                    key={i}
                    className="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium"
                  >
                    {day.slice(0, 3)}
                  </span>
                ))}
                {sub.subscription_monthly.map((day, i) => (
                  <span
                    key={i}
                    className="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium"
                  >
                    {day}
                  </span>
                ))}
              </div>
            </div>

            {/* Items */}
            <div className="space-y-2 mb-4">
              {sub.items.map((item, i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 p-2 rounded-lg border border-gray-100"
                >
                  <div className="w-10 h-10 bg-orange-100 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
                    {item.image ? (
                      <img
                        src={item.image}
                        alt={item.name}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <span className="text-2xl">🍕</span>
                    )}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">
                      {item.quantity} x {item.name}
                    </p>
                    <p className="text-xs text-gray-500">
                      {currency}{item.price.toFixed(0)}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            {/* Actions */}
            <div className="flex gap-3">
              <button
                onClick={() => handleCancelSubscription(sub._id)}
                disabled={updatingId === sub._id}
                className="flex-1 border border-red-300 text-red-600 py-2.5 rounded-lg hover:bg-red-50 transition font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {updatingId === sub._id ? 'Updating...' : 'Cancel'}
              </button>
            </div>
          </div>
        );
      })}

      {/* Loading & End messages */}
      {loading && <p className="col-span-full text-center">Loading more...</p>}
      {!hasMore && subscriptions.length > 0 && (
        <p className="col-span-full text-center">No more subscriptions.</p>
      )}
    </div>
  );
};

export default function SubscriptionsPage() {
  return (
    <DashboardLayout>
      <DeliveredSubscriptionsPaused />
    </DashboardLayout>
  );
}