'use client';

import { useT, useLocale } from '@/lib/i18n/react';
import { formatInteger } from '@/lib/format';
import { Table } from '@/components/ui/primitives/Table/Table';
import { MetricTile } from '@/components/ui/domain/MetricTile/MetricTile';
import { formatAgorotShekels } from '@/lib/money';
import type { ShareConversionsResult } from '@/server/admin/resources/sharing/conversions.js';

type ConversionsTabProps = {
  data: ShareConversionsResult | undefined;
};

function fmtPct(rate: number): string {
  return (rate * 100).toFixed(1) + '%';
}

export function ConversionsTab({ data }: ConversionsTabProps) {
  const t = useT('admin_sharing');
  const { locale } = useLocale();

  return (
    <div className="mt-4 space-y-6">
      {/* KPI row */}
      <div className="grid grid-cols-3 gap-4">
        <MetricTile
          label={t('total_conversions')}
          value={formatInteger(data?.totalConversions ?? 0, locale)}
        />
        <MetricTile
          label={t('total_revenue')}
          value={formatAgorotShekels(data?.totalRevenue ?? 0)}
        />
        <MetricTile label={t('conversion_rate')} value={fmtPct(data?.conversionRate ?? 0)} />
      </div>

      {/* Channel table */}
      <div className="rounded-lg border p-4">
        <h2 className="mb-3 font-medium">{t('conversions_by_channel_title')}</h2>
        {(data?.byChannel ?? []).length > 0 ? (
          <Table>
            <Table.Head>
              <Table.Row>
                <Table.HeadCell>{t('col_channel')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('clicks_col')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('conversions_col')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('revenue_col')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('conv_rate_label')}</Table.HeadCell>
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {(data?.byChannel ?? []).map((row) => (
                <Table.Row key={row.channel}>
                  <Table.Cell>{t(`channel_${row.channel}` as Parameters<typeof t>[0])}</Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatInteger(row.clicks, locale)}
                  </Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatInteger(row.conversions, locale)}
                  </Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatAgorotShekels(row.revenue)}
                  </Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {fmtPct(row.conversionRate)}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        ) : (
          <p className="text-text-muted text-sm">{t('no_data')}</p>
        )}
      </div>

      {/* Top links table */}
      <div className="rounded-lg border p-4">
        <h2 className="mb-3 font-medium">{t('top_converting_links')}</h2>
        {(data?.topLinks ?? []).length > 0 ? (
          <Table>
            <Table.Head>
              <Table.Row>
                <Table.HeadCell>{t('col_deal')}</Table.HeadCell>
                <Table.HeadCell>{t('col_slug')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('clicks_col')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('conversions_col')}</Table.HeadCell>
                <Table.HeadCell className="text-end">{t('revenue_col')}</Table.HeadCell>
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {(data?.topLinks ?? []).map((row) => (
                <Table.Row key={row.linkId}>
                  <Table.Cell className="max-w-[12rem] truncate">
                    {row.dealTitle || row.slug}
                  </Table.Cell>
                  <Table.Cell className="text-text-muted font-mono text-xs">{row.slug}</Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatInteger(row.clicks, locale)}
                  </Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatInteger(row.conversions, locale)}
                  </Table.Cell>
                  <Table.Cell className="text-end tabular-nums">
                    {formatAgorotShekels(row.revenue)}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        ) : (
          <p className="text-text-muted text-sm">{t('no_data')}</p>
        )}
      </div>
    </div>
  );
}