'use client';
import { FunctionComponent, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Box, Stack, Tab, Tabs } from '@mui/material';
import { AppIcon, PageHeader } from '@/components';
import WalletPaymentHistory from './WalletPaymentHistory';
import WalletInstallments from './WalletInstallments';
import WalletRefunds from './WalletRefunds';
import WalletReceipts from './WalletReceipts';

type WalletTab = 'payments' | 'installments' | 'refunds' | 'receipts';

/**
 * /wallet — the customer money hub (ui-phase-6). Four sections replace the old installments-only shell so
 * a card-paying customer (the default path) finally sees something other than a permanently empty tab:
 * «پرداخت‌ها» (payment history), «اقساط» (the unchanged f11 D5 installment tracker), «استردادها» (refunds,
 * REQ-048), «رسیدها» (client-derived invoice links). All four read at the shell's shared `CONTENT_MAX_WIDTH`
 * — no local width override.
 */
const WalletScreen: FunctionComponent = () => {
  const t = useTranslations('bnpl');
  const [tab, setTab] = useState<WalletTab>('payments');

  return (
    <Stack sx={{ gap: 2 }}>
      <PageHeader title={t('wallet_hub_title')} />

      <Tabs
        value={tab}
        onChange={(_event, value: WalletTab) => setTab(value)}
        variant="scrollable"
        scrollButtons="auto"
        allowScrollButtonsMobile
        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
      >
        <Tab value="payments" label={t('tab_payments')} icon={<AppIcon icon="payment" size={18} />} iconPosition="start" />
        <Tab
          value="installments"
          label={t('tab_installments')}
          icon={<AppIcon icon="installments" size={18} />}
          iconPosition="start"
        />
        <Tab value="refunds" label={t('tab_refunds')} icon={<AppIcon icon="refunds" size={18} />} iconPosition="start" />
        <Tab value="receipts" label={t('tab_receipts')} icon={<AppIcon icon="document" size={18} />} iconPosition="start" />
      </Tabs>

      <Box role="tabpanel">
        {tab === 'payments' ? <WalletPaymentHistory /> : null}
        {tab === 'installments' ? <WalletInstallments /> : null}
        {tab === 'refunds' ? <WalletRefunds /> : null}
        {tab === 'receipts' ? <WalletReceipts /> : null}
      </Box>
    </Stack>
  );
};

export default WalletScreen;