"use client"
import React, { useEffect, useState } from 'react';
import DashboardLayout from '@/app/dashboard/layout';
import { useSearchParams } from 'next/navigation';
import EarningTable from '@/components/earningTable/table';
import { useGlobalContext } from '@/context/Provider';
import apis from '@/utils/apis';
import { currency } from '@/lib/utils';

interface EarningCardProps {
  data: number;
  type: string;
  className?: string;
}

const EarningCard: React.FC<EarningCardProps> = ({ data, type, className }) => {
  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 JobAutomation = () => {
  const { userInfo } = useGlobalContext()
  const searchParams = useSearchParams();
  const [earningList, setEarningList] = useState([])
  const [earnings, setEarnings] = useState({
    todayOrders: 0,
    weekOrders: 0,
    monthOrders: 0,
    totalTodayEarning: 0,
    totalWeekEarning: 0,
    totalMonthEarning: 0,
  });



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


  const getCount = async () => {
    try {
      const apiRes = await apis.Count.get(userInfo?._id ? userInfo.restaurant_id?._id : '');
      setEarnings(apiRes)
    } catch (error) {

    }
  }
  const getEarnings = async () => {

    const type = searchParams.get("type") || "today";
    const page = searchParams.get("page") || "1";
    const limit = searchParams.get("limit") || "15";
    try {
      const params = new URLSearchParams({
        status: type,
        page,
        limit,
        restaurant_id: userInfo?.restaurant_id?._id || "",
      });
      const apiRes = await apis.Earning.getList(params.toString());
      setEarningList(apiRes?.data)
    } catch (error) {

    }
  }

  useEffect(() => {
    if (userInfo?._id) {
      getEarnings()
    }
  }, [userInfo?._id, searchParams])


  return (
    <div className="w-full h-[100vh] bg-gray-100 flex flex-col">
      {/* Feature Cards Section */}

      <div className="w-full flex flex-row flex-nowrap gap-4 p-4 flex-shrink-0 overflow-x-auto md:overflow-visible">
        <EarningCard className="flex-1 min-w-[280px] sm:min-w-[300px] md:min-w-[320px]" data={earnings?.totalTodayEarning ?? 0} type={"Today"} />
        <EarningCard className="flex-1 min-w-[280px] sm:min-w-[300px] md:min-w-[320px]" data={earnings?.totalWeekEarning ?? 0} type={"This Week"} />
        <EarningCard className="flex-1 min-w-[280px] sm:min-w-[300px] md:min-w-[320px]" data={earnings?.totalMonthEarning ?? 0} type={"This Month"} />
      </div>


      {/* Scrollable DataTable (Takes Remaining Space) */}
      <div className="w-full flex-grow flex flex-col p-4 overflow-hidden">
        <div className='text-[18px] font-[600] text-[#121212] w-full text-start bg-white p-2 rounded-t-lg'>Recent Orders</div>
        <EarningTable data={earningList} />
      </div>
    </div>

  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <JobAutomation />
    </DashboardLayout>
  );
}