/**
 * CaseResolved — email sent when a support case is resolved.
 */

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 CaseResolvedProps {
  caseId: string;
  resolution?: string;
  caseUrl: string;
  reopenUrl?: string;
  locale?: Locale;
}

const copy = {
  he: {
    preview: 'התיק נסגר',
    heading: 'תיק התמיכה נסגר',
    resolutionLabel: 'סיכום טיפול',
    body: 'תיק התמיכה שלך טופל ונסגר. אם הבעיה חזרה, תוכל לפתוח אותו מחדש.',
    caseIdLabel: 'מספר תיק',
    cta: 'צפה בתיק',
    reopenCta: 'פתח מחדש',
    footer: 'מולטידיל — חיסכון אמיתי, באמת',
  },
  en: {
    preview: 'Your support case is resolved',
    heading: 'Support case resolved',
    resolutionLabel: 'Resolution',
    body: 'Your support case has been resolved and closed. If the issue recurs, you can reopen it.',
    caseIdLabel: 'Case ID',
    cta: 'View case',
    reopenCta: 'Reopen case',
    footer: 'Multideal — Real deals, real savings',
  },
};

export function CaseResolved({
  caseId,
  resolution,
  caseUrl,
  reopenUrl,
  locale = 'he',
}: CaseResolvedProps) {
  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();
  const effectiveReopenUrl = reopenUrl ?? caseUrl + '/reopen';

  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.success600,
              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' }}>
            {resolution && (
              <Section
                style={{
                  backgroundColor: tokens.surfaceRaised,
                  border: `1px solid ${tokens.borderDefault}`,
                  borderRadius: '6px',
                  padding: spacing.padCompact,
                  marginBottom: spacing.px20,
                }}
              >
                <Text
                  style={{ color: tokens.textMuted, fontSize: spacing.px12, margin: '0 0 4px' }}
                >
                  {c.resolutionLabel}
                </Text>
                <Text
                  style={{
                    color: tokens.textPrimary,
                    fontSize: spacing.px14,
                    lineHeight: '1.5',
                    margin: 0,
                  }}
                >
                  {resolution}
                </Text>
              </Section>
            )}

            <Text
              style={{ fontSize: spacing.px15, lineHeight: '1.6', color: tokens.textSecondary }}
            >
              {c.body}
            </Text>

            {/* CTAs */}
            <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',
                  marginInlineEnd: spacing.px12,
                }}
              >
                {c.cta}
              </Link>
              <Link
                href={effectiveReopenUrl}
                style={{
                  backgroundColor: tokens.neutral100,
                  color: tokens.textPrimary,
                  padding: spacing.padButtonSm,
                  borderRadius: '6px',
                  fontWeight: '600',
                  fontSize: spacing.px15,
                  textDecoration: 'none',
                  display: 'inline-block',
                }}
              >
                {c.reopenCta}
              </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 CaseResolved;
