import { Heading, Section, Text } from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Button } from './components/Button';
import { MetricGrid } from './components/MetricGrid';
import { styles } from './components/styles';
import { tCommon } from './i18n/common';
import { tTemplate } from './i18n/templates';
import { resolveLocale, type Locale } from './i18n/types';
import { interpolate } from './utils/interpolate';
import { theme } from './theme';

export type ShopSummaryPeriod = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly';

const periodLabels: Record<ShopSummaryPeriod, { en: string; am: string }> = {
  daily: { en: 'Daily', am: 'ዕለታዊ' },
  weekly: { en: 'Weekly', am: 'ሳምንታዊ' },
  monthly: { en: 'Monthly', am: 'ወርሃዊ' },
  quarterly: { en: 'Quarterly', am: 'ሩብ ዓመታዊ' },
  yearly: { en: 'Yearly', am: 'ዓመታዊ' },
};

export interface ShopSummaryEmailProps {
  locale?: Locale;
  period?: ShopSummaryPeriod;
  userName?: string;
  dateRange?: string;
  ordersCount?: string;
  revenue?: string;
  averageOrderValue?: string;
  topSku?: string;
  ctaUrl?: string;
}

export const ShopSummaryEmail = ({
  locale,
  period = 'weekly',
  userName = 'Marketing Lead',
  dateRange = '28 Jul – 3 Aug 2026',
  ordersCount = '486',
  revenue = 'ETB 1.24M',
  averageOrderValue = 'ETB 2,551',
  topSku = 'Paracetamol 500mg',
  ctaUrl = `${theme.brand.website}/admin/analytics`,
}: ShopSummaryEmailProps) => {
  const l = resolveLocale(locale);
  const t = tTemplate('shop-summary', l);
  const common = tCommon(l);
  const periodLabel = periodLabels[period][l];
  return (
    <EmailLayout preview={interpolate(t.preview, { periodLabel })} locale={l}>
      <Heading style={styles.heading}>{interpolate(t.heading, { periodLabel })}</Heading>
      <Text style={styles.text}>{interpolate(t.body1, { userName, periodLabel, dateRange })}</Text>
      <MetricGrid
        metrics={[
          { label: t.orders, value: ordersCount },
          { label: t.revenue, value: revenue },
          { label: t.aov, value: averageOrderValue },
          { label: t.topSku, value: topSku },
        ]}
      />
      <Section style={styles.buttonSection}>
        <Button href={ctaUrl}>{t.cta}</Button>
      </Section>
      <Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
    </EmailLayout>
  );
};

ShopSummaryEmail.PreviewProps = { locale: 'en', period: 'weekly' } as ShopSummaryEmailProps;
export default ShopSummaryEmail;