'use client';
import React, { useEffect, useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { setCookie } from 'nookies';
import DashboardLayout from '@/app/dashboard/layout';
// import EarningCard from './card/page';
import DataTable from '@/components/dataTable/table';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { currency } from '@/lib/utils';

const EarningCard = ({
  data,
  type,
  className
}: {
  data: number;
  type: string;
  className: string;
}) => {
  return (
    <div
      className={`flex flex-col justify-between rounded-xl bg-white p-5 border border-[#F0F0F0] shadow-sm ${className}`}
    >
      <div className="flex items-center justify-between w-full">
        <span className="text-sm font-bold text-[#121212]">Earnings</span>
        <span className="text-2xl font-bold text-[#121212]">{currency}{data.toFixed(2)}</span>
      </div>
      <div className="mt-1">
        <span className="text-xs font-medium text-[var(--orange-400)]">{type}</span>
      </div>
    </div>
  );
};

const OrderCard = ({
  data,
  type,
  className
}: {
  data: number;
  type: string;
  className: string;
}) => {
  return (
    <div
      className={`flex flex-col justify-between rounded-xl bg-white p-5 border border-[#F0F0F0] shadow-sm ${className}`}
    >
      <div className="flex items-center justify-between w-full">
        <span className="text-sm font-bold text-[#121212]">Total Orders</span>
        <span className="text-2xl font-bold text-[#121212]">{data ?? 0}</span>
      </div>
      <div className="mt-1">
        <span className="text-xs font-medium text-[var(--orange-400)]">{type}</span>
      </div>
    </div>
  );
};

const JobAutomation = () => {
  const { userInfo, getProfile, setUserInfo } = useGlobalContext();
  const searchParams = useSearchParams();

  useEffect(() => {
    const token = searchParams.get('token');
    if (token) {
      apis.setToken(token);
      setCookie(null, 'COOKIES_USER_ACCESS_TOKEN', token, {
        path: '/'
      });
      sessionStorage.setItem('token', token);
      setUserInfo((prev: any) => ({
        ...prev,
        access_token: token,
      }));
      getProfile();
    }
  }, [searchParams]);
  const [orderList, setOrderList] = useState([]);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(5);
  const [totalPages, setTotalPages] = useState(1);
  const [orders, setOrders] = useState({
    todayOrders: 0,
    weekOrders: 0,
    monthOrders: 0,
    totalTodayEarning: 0,
    totalWeekEarning: 0,
    totalMonthEarning: 0
  });

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

  useEffect(() => {
    getProfile();
  }, []);

  const getCount = async () => {
    try {
      const apiRes = await apis.Count.get(
        userInfo?._id ? userInfo.restaurant_id?._id : ''
      );
      setOrders(apiRes);
    } catch (error) { }
  };
  const recentOrders = async (pageNum = 1) => {
    try {
      if (!userInfo?.restaurant_id?._id) return;
      const apiRes = await apis.Orders.recentGet(
        `${userInfo?.restaurant_id?._id}?page=${pageNum}&limit=${limit}`
      );

      setOrderList(apiRes?.data || []);
      setTotalPages(apiRes?.total_pages || 1);
    } catch (error) {
      console.error('Error fetching recent orders:', error);
    }
  };

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

  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setPage(newPage);
    }
  };

  return (
    <div className="h-screen w-full flex-col overflow-y-auto bg-gray-100">
      {/* Feature Cards Section */}
      <div
        className="flex w-full flex-nowrap gap-4
  overflow-x-auto p-2
  md:flex-wrap md:overflow-visible
"
      >
        {' '}
        {[
          {
            data: orders?.totalTodayEarning ?? 0,
            type: 'Today',
            isEarning: true
          },
          {
            data: orders?.totalWeekEarning ?? 0,
            type: 'This Week',
            isEarning: true
          },
          {
            data: orders?.totalMonthEarning ?? 0,
            type: 'This Month',
            isEarning: true
          },
          { data: orders?.todayOrders ?? 0, type: 'Today', isEarning: false },
          {
            data: orders?.weekOrders ?? 0,
            type: 'This Week',
            isEarning: false
          },
          {
            data: orders?.monthOrders ?? 0,
            type: 'This Month',
            isEarning: false
          }
        ].map((item, idx) =>
          item.isEarning ? (
            <EarningCard
              key={idx}
              data={item.data}
              type={item.type}
              className="min-w-[280px] flex-shrink-0 sm:min-w-[300px] md:min-w-[320px] flex-1"
            />
          ) : (
            <OrderCard
              key={idx}
              data={item.data}
              type={item.type}
              className="min-w-[280px] flex-shrink-0 sm:min-w-[300px] md:min-w-[320px] flex-1"
            />
          )
        )}
      </div>

      {/* Scrollable DataTable (Fills and scrolls) */}
      <div className="mt-0 flex w-full flex-grow flex-col overflow-hidden p-4">
        <div className="w-full rounded-t-lg bg-white p-2 text-start text-[18px] font-[600] text-[#121212]">
          Recent Orders
        </div>
        <div className="flex-1 overflow-auto">
          <DataTable
            data={orderList}
            page={page}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        </div>
      </div>
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <Suspense fallback={<div className="h-screen w-full flex items-center justify-center bg-gray-100">Loading...</div>}>
      <DashboardLayout>
        <JobAutomation />
      </DashboardLayout>
    </Suspense>
  );
}