'use client';

import { useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminPaymentMethodListAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import PaymentMethodTable from './PaymentMethodTable';
import CountryPaymentSection from './CountryPaymentSection';

export default function AdminPaymentMethod() {
  const { translations } = useTranslation();
  const router = useRouter();
  const params = useParams();
  const role = (params?.role as string) || 'admin';
  const [activeTab, setActiveTab] = useState<'methods' | 'countries'>('methods');
  const [deleteModal, setDeleteModal] = useState<any>(null);
  const [search, setSearch] = useState('');
  const [listParams, setListParams] = useState({
    page: 1,
    per_page: 50,
    sort_by: 'created_at',
    sort: 'DESC',
  });

  const { data, isPending, refetch, fetchStatus } = useQuery({
    queryKey: [AdminPaymentMethodListAPI, search, listParams],
    queryFn: () =>
      CustomFetch(
        { url: AdminPaymentMethodListAPI, params: { search, ...listParams } },
        null,
        false
      ),
    refetchOnWindowFocus: false,
    select: (res: any) => res?.data,
    enabled: activeTab === 'methods',
  });

  return (
    <>
      <div className="flex items-center border-b border-lightGray *:py-1 mb-5 *:whitespace-nowrap overflow-x-auto pb-5 gap-3">
        <button
          type="button"
          onClick={() => setActiveTab('methods')}
          className={`${activeTab === 'methods'
              ? 'text-white bg-primary font-medium border-transparent'
              : 'text-black font-medium border-lightGray'
            } text-sm cursor-pointer border rounded-full px-5 py-2`}
        >
          Payment Methods
        </button>
        <button
          type="button"
          onClick={() => setActiveTab('countries')}
          className={`${activeTab === 'countries'
              ? 'text-white bg-primary font-medium border-transparent'
              : 'text-black font-medium border-lightGray'
            } text-sm cursor-pointer border rounded-full px-5 py-2`}
        >
          Assigned Countries
        </button>
      </div>

      {activeTab === 'methods' && (
        <PaymentMethodTable
          searchBtnProps={{
            setSearch,
            title: 'Add Method',
            callBack: () => router.push(`/${role}/payment-method/create`),
            buttonRequired: true,
          }}
          apiData={{
            data,
            params: listParams,
            setParams: setListParams,
            isPending,
            refetch,
            fetchStatus,
          }}
          search={search}
          deleteModal={deleteModal}
          setDeleteModal={setDeleteModal}
          refetch={refetch}
          translations={translations}
        />
      )}

      {activeTab === 'countries' && <CountryPaymentSection />}
    </>
  );
}