'use client';

import { useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';

import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import Tabs from '@/components/Tabs';
import ExpenseRequestContent from '@/components/pages/expense/ExpenseRequestContent';
import ExpenseRealizationContent from '@/components/pages/expense/ExpenseRealizationContent';

import { Expense } from '@/types/api/expense';

interface ExpenseDetailProps {
  initialValues?: Expense;
}

const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<string>('request');

  const expenseDetailTabs = useMemo(() => {
    const validTabs = [
      {
        id: 'request',
        label: 'Pengajuan',
        content: <ExpenseRequestContent initialValues={initialValues} />,
      },
    ];

    if (
      initialValues?.latest_approval &&
      initialValues?.latest_approval.step_number >= 5 &&
      initialValues.latest_approval.action !== 'REJECTED'
    ) {
      validTabs.push({
        id: 'realization',
        label: 'Realisasi',
        content: <ExpenseRealizationContent initialValues={initialValues} />,
      });
    }

    return validTabs;
  }, [initialValues]);

  return (
    <>
      <section className='w-full max-w-full pb-16'>
        <header className='flex flex-col gap-4'>
          <Button
            variant='link'
            onClick={router.back}
            className='w-fit p-0 text-primary'
          >
            <Icon icon='uil:arrow-left' width={24} height={24} />
            Kembali
          </Button>

          <h1 className='text-2xl font-bold text-center'>
            Detail Biaya Operasional
          </h1>
        </header>

        <Tabs
          activeTabId={activeTab}
          onTabChange={setActiveTab}
          tabs={expenseDetailTabs}
          variant='lifted'
          className={{
            wrapper: 'mx-auto mt-4',
          }}
        />
      </section>
    </>
  );
};

export default ExpenseDetail;