import { useT } from '@/lib/i18n/react';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';
import { Table } from '@/components/ui/primitives/Table';
import type { AffiliateConfig } from '../types';
import { TIER_WINDOW_DAYS } from '../types';

type Props = { config: AffiliateConfig };

export function TierTable({ config }: Props) {
  const t = useT('affiliate_landing');

  const tier2MinSalesMinus1 = config.tier2MinSales - 1;
  const tier3MinSalesMinus1 = config.tier3MinSales - 1;

  const rows = [
    {
      label: t('tier1_label'),
      range: t('tier1_range').replace('{{tier2MinSalesMinus1}}', String(tier2MinSalesMinus1)),
      pct: config.tier1Pct,
    },
    {
      label: t('tier2_label'),
      range: t('tier2_range')
        .replace('{{tier2MinSales}}', String(config.tier2MinSales))
        .replace('{{tier3MinSalesMinus1}}', String(tier3MinSalesMinus1)),
      pct: config.tier2Pct,
    },
    {
      label: t('tier3_label'),
      range: t('tier3_range').replace('{{tier3MinSales}}', String(config.tier3MinSales)),
      pct: config.tier3Pct,
    },
  ];

  const windowNote = t('tiers_window_note').replace('{{tierWindowDays}}', String(TIER_WINDOW_DAYS));
  const salesColHeader = t('tier_col_sales').replace(
    '{{tierWindowDays}}',
    String(TIER_WINDOW_DAYS),
  );
  const tiersTooltip = t('tooltip_tiers_window').replace(
    '{{tierWindowDays}}',
    String(TIER_WINDOW_DAYS),
  );

  return (
    <section aria-labelledby="tiers-heading" className="bg-(--color-surface-raised) py-16">
      <h2 id="tiers-heading" className="mb-2 text-center text-3xl font-bold text-(--color-text)">
        {t('tiers_heading')}
      </h2>
      <p className="mb-8 text-center text-sm text-(--color-text-muted)">
        <LabelWithTooltip label={windowNote} tooltip={tiersTooltip} />
      </p>
      <div className="mx-auto max-w-2xl overflow-hidden rounded-2xl border border-(--color-border) bg-(--color-surface)">
        <Table>
          <Table.Head className="bg-(--color-surface-raised)">
            <Table.Row>
              <Table.HeadCell className="px-6 py-3 text-xs font-semibold text-(--color-text)">
                {t('tier_col_level')}
              </Table.HeadCell>
              <Table.HeadCell className="px-6 py-3 text-xs font-semibold text-(--color-text)">
                {salesColHeader}
              </Table.HeadCell>
              <Table.HeadCell className="px-6 py-3 text-end text-xs font-semibold text-(--color-text)">
                {t('tier_col_commission')}
              </Table.HeadCell>
            </Table.Row>
          </Table.Head>
          <Table.Body>
            {rows.map((row) => (
              <Table.Row key={row.label}>
                <Table.Cell className="px-6 py-4 font-medium text-(--color-text)">
                  {row.label}
                </Table.Cell>
                <Table.Cell className="px-6 py-4 text-(--color-text-secondary)">
                  {row.range}
                </Table.Cell>
                <Table.Cell className="px-6 py-4 text-end font-bold text-(--color-primary)">
                  {row.pct}%
                </Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table>
      </div>
      <p className="mt-4 text-center text-xs text-(--color-text-muted)">{t('tiers_lock_note')}</p>
    </section>
  );
}