/**
 * Reopened — email sent when a support case is reopened.
 */

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

export interface ReopenedProps {
  caseId: string;
  caseUrl: string;
  locale?: Locale;
}

const copy = {
  he: {
    preview: 'התיק נפתח מחדש',
    heading: 'תיק התמיכה נפתח מחדש',
    body: 'תיק התמיכה שלך נפתח מחדש. הצוות שלנו יחזור לטפל בו בהקדם.',
    caseIdLabel: 'מספר תיק',
    cta: 'צפה בתיק',
    footer: 'מולטידיל — חיסכון אמיתי, באמת',
  },
  en: {
    preview: 'Your case was reopened',
    heading: 'Support case reopened',
    body: 'Your support case has been reopened. Our team will get back to it shortly.',
    caseIdLabel: 'Case ID',
    cta: 'View case',
    footer: 'Multideal — Real deals, real savings',
  },
};

export function Reopened({ caseId, caseUrl, locale = 'he' }: ReopenedProps) {
  const c = copy[locale];
  const isHe = locale === 'he';
  const fontFamily = isHe ? fonts.he : fonts.en;
  const dir = isHe ? 'rtl' : 'ltr';
  const shortId = caseId.slice(0, 8).toUpperCase();

  return (
    <Html lang={locale} dir={dir}>
      <Head />
      <Preview>{c.preview}</Preview>
      <Body
        style={{
          backgroundColor: tokens.surfaceBase,
          fontFamily,
          color: tokens.textPrimary,
          margin: 0,
          padding: 0,
        }}
      >
        <Container
          style={{
            maxWidth: spacing.cardMaxWide,
            margin: spacing.marginCenter,
            backgroundColor: tokens.surfaceBase,
            border: `1px solid ${tokens.borderDefault}`,
            borderRadius: '8px',
            overflow: 'hidden',
          }}
        >
          {/* Header */}
          <Section
            style={{
              backgroundColor: tokens.brandPrimary700,
              padding: spacing.padHeaderMd,
              textAlign: isHe ? 'right' : 'left',
            }}
          >
            <Text
              style={{
                color: tokens.brandOnPrimary,
                fontSize: spacing.px20,
                fontWeight: '700',
                margin: 0,
              }}
            >
              {c.heading}
            </Text>
            <Text
              style={{ color: tokens.brandOnPrimary, fontSize: spacing.px14, margin: '4px 0 0' }}
            >
              #{shortId}
            </Text>
          </Section>

          {/* Body */}
          <Section style={{ padding: spacing.padHeaderMd, textAlign: isHe ? 'right' : 'left' }}>
            <Text
              style={{ fontSize: spacing.px15, lineHeight: '1.6', color: tokens.textSecondary }}
            >
              {c.body}
            </Text>

            {/* CTA */}
            <Section style={{ textAlign: 'center', margin: spacing.marginBlock24 }}>
              <Link
                href={caseUrl}
                style={{
                  backgroundColor: tokens.brandPrimary700,
                  color: tokens.brandOnPrimary,
                  padding: spacing.padButtonSm,
                  borderRadius: '6px',
                  fontWeight: '600',
                  fontSize: spacing.px15,
                  textDecoration: 'none',
                  display: 'inline-block',
                }}
              >
                {c.cta}
              </Link>
            </Section>
          </Section>

          {/* Footer */}
          <Section
            style={{
              borderTop: `1px solid ${tokens.borderDefault}`,
              padding: spacing.padBodySide,
              textAlign: 'center',
            }}
          >
            <Text style={{ color: tokens.textMuted, fontSize: spacing.px12, margin: 0 }}>
              {c.footer}
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

export default Reopened;
