/**
 * VendorWelcome.tsx - FDS §9.3 Vendor Welcome Email
 *
 * Sent after vendor email verification.
 */

import {
  Html,
  Head,
  Body,
  Container,
  Section,
  Text,
  Link,
  Hr,
  Preview,
} from '@/server/email/primitives.js';
import { dirForLocale, type Locale } from '@/lib/i18n/index.js';
import { fonts, spacing, tokens } from '@/server/email/tokens/index.js';

export interface VendorWelcomeProps {
  vendorName: string;
  loginUrl: string;
  supportEmail?: string;
  siteUrl: string;
  locale?: Locale;
}

const copy = {
  he: {
    preview: 'ברוך הבא ל-Multideal - הפלטפורמה לעסקאות מוזלות',
    heading: (name: string) => `ברוך הבא, ${name}!`,
    sub: 'אנחנו שמחים שהצטרפת אל Multideal.',
    what1: 'Multideal מחברת בין עסקים מקומיים ללקוחות דרך עסקאות מוזלות ושקופות.',
    what2: 'כל עסקה מוצגת לאלפי לקוחות פוטנציאליים באזורך - ב-0 עלות מראש.',
    what3: 'אתה משלם עמלה רק על מכירות שקרו.',
    loginCta: 'כניסה ללוח הבקרה',
    support: 'לתמיכה:',
    siteLink: 'לאתר',
  },
  en: {
    preview: 'Welcome to Multideal - the discounted-deals marketplace',
    heading: (name: string) => `Welcome, ${name}!`,
    sub: "We're glad you joined Multideal.",
    what1:
      'Multideal connects local businesses with customers through transparent, discounted deals.',
    what2:
      'Every deal is shown to thousands of potential customers in your area - no upfront cost.',
    what3: 'You only pay a commission on sales that actually happen.',
    loginCta: 'Go to Dashboard',
    support: 'Support:',
    siteLink: 'Visit the site',
  },
} as const;

export default function VendorWelcome({
  vendorName,
  loginUrl,
  supportEmail = 'support@multideal.co.il',
  siteUrl,
  locale = 'he',
}: VendorWelcomeProps) {
  const t = copy[locale];
  const dir = dirForLocale(locale);
  const fontFamily = locale === 'he' ? fonts.he : fonts.en;

  return (
    <Html lang={locale} dir={dir}>
      <Head />
      <Preview>{t.preview}</Preview>
      <Body style={{ backgroundColor: tokens.neutral100, fontFamily }}>
        <Container style={{ padding: spacing.padPage }}>
          <div
            style={{
              maxWidth: spacing.cardMaxMedium,
              margin: '0 auto',
              backgroundColor: tokens.surfaceBase,
              borderRadius: '8px',
              border: `1px solid ${tokens.borderDefault}`,
              overflow: 'hidden',
            }}
          >
            {/* Logo / header strip */}
            <Section
              style={{
                backgroundColor: tokens.brandPrimary700,
                padding: spacing.padHeaderLg,
                textAlign: locale === 'he' ? 'right' : 'left',
              }}
            >
              <Text
                style={{
                  fontSize: spacing.px26,
                  fontWeight: 700,
                  color: tokens.brandOnPrimary,
                  fontFamily,
                  margin: '0',
                  letterSpacing: '-0.02em',
                }}
              >
                מולטידיל
              </Text>
            </Section>

            {/* Body */}
            <Section
              style={{
                padding: spacing.padSectionLg,
                direction: dir,
                textAlign: locale === 'he' ? 'right' : 'left',
              }}
            >
              <Text
                style={{
                  fontSize: spacing.px22,
                  fontWeight: 700,
                  color: tokens.textPrimary,
                  fontFamily,
                  margin: '0 0 8px',
                }}
              >
                {t.heading(vendorName)}
              </Text>
              <Text
                style={{
                  fontSize: spacing.px16,
                  color: tokens.textSecondary,
                  fontFamily,
                  margin: spacing.marginBottom24,
                }}
              >
                {t.sub}
              </Text>

              <Hr style={{ borderColor: tokens.borderDefault, margin: spacing.marginBottom20 }} />

              {[t.what1, t.what2, t.what3].map((line) => (
                <Text
                  key={line}
                  style={{
                    fontSize: spacing.px15,
                    color: tokens.textSecondary,
                    fontFamily,
                    margin: spacing.marginBottom10,
                    lineHeight: '1.6',
                  }}
                >
                  {line}
                </Text>
              ))}

              <div
                style={{
                  margin: spacing.marginTop28,
                  textAlign: locale === 'he' ? 'right' : 'left',
                }}
              >
                <Link
                  href={loginUrl}
                  style={{
                    backgroundColor: tokens.brandPrimary700,
                    color: tokens.brandOnPrimary,
                    padding: spacing.padButton,
                    borderRadius: '6px',
                    fontFamily,
                    fontSize: spacing.px15,
                    fontWeight: 600,
                    textDecoration: 'none',
                    display: 'inline-block',
                  }}
                >
                  {t.loginCta}
                </Link>
              </div>
            </Section>

            {/* Footer */}
            <Section
              style={{
                padding: spacing.padHero,
                backgroundColor: tokens.surfaceRaised,
                borderTop: `1px solid ${tokens.borderDefault}`,
                direction: dir,
                textAlign: locale === 'he' ? 'right' : 'left',
              }}
            >
              <Text
                style={{
                  fontSize: spacing.px13,
                  color: tokens.textMuted,
                  fontFamily,
                  margin: '0',
                }}
              >
                {t.support}{' '}
                <Link
                  href={`mailto:${supportEmail}`}
                  style={{ color: tokens.textLink, textDecoration: 'none' }}
                >
                  {supportEmail}
                </Link>
                {'  ·  '}
                <Link href={siteUrl} style={{ color: tokens.textLink, textDecoration: 'none' }}>
                  {t.siteLink}
                </Link>
              </Text>
            </Section>
          </div>
        </Container>
      </Body>
    </Html>
  );
}
