import { Card } from '@/components/ui/layout/Card';
import { Table } from '@/components/ui/primitives/Table/Table';
import { useT } from '@/lib/i18n/react';

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface CampaignStatsCardProps {
  campaignId: number;
  stats: {
    delivered: number;
    opens: number;
    clicks: number;
    unsubscribes: number;
    bounces: number;
  };
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function CampaignStatsCard({ campaignId, stats }: CampaignStatsCardProps) {
  const t = useT('admin_campaigns');
  const { delivered, opens, clicks, unsubscribes, bounces } = stats;

  const openRate = delivered > 0 ? Math.round((opens / delivered) * 100) : 0;
  const clickRate = delivered > 0 ? Math.round((clicks / delivered) * 100) : 0;

  const rows: Array<{ label: string; value: string }> = [
    { label: t('stat_delivered'), value: String(delivered) },
    {
      label: t('stat_open_rate'),
      value: t('stat_open_rate_value')
        .replace('{{rate}}', String(openRate))
        .replace('{{count}}', String(opens)),
    },
    {
      label: t('stat_click_rate'),
      value: t('stat_click_rate_value')
        .replace('{{rate}}', String(clickRate))
        .replace('{{count}}', String(clicks)),
    },
    { label: t('stat_unsubscribes'), value: String(unsubscribes) },
    { label: t('stat_bounces'), value: String(bounces) },
  ];

  return (
    <Card>
      <h3 className="mb-4 text-base font-semibold">
        {t('stats_card_title')}
        {campaignId}
      </h3>
      <Table>
        <Table.Head>
          <Table.Row>
            <Table.HeadCell className="ps-0 pe-4 text-[color:var(--color-text-subtle)]">
              {t('stats_col_metric')}
            </Table.HeadCell>
            <Table.HeadCell className="ps-4 pe-0 text-end text-[color:var(--color-text-subtle)]">
              {t('stats_col_value')}
            </Table.HeadCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {rows.map(({ label, value }) => (
            <Table.Row key={label}>
              <Table.Cell className="ps-0 pe-4">{label}</Table.Cell>
              <Table.Cell className="ps-4 pe-0 text-end font-mono">{value}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Card>
  );
}