/**
 * VendorOffered — email sent to customer when vendor makes an offer on a support case.
 */

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 VendorOfferedProps {
  caseId: string;
  offerSummary?: string;
  caseUrl: string;
  locale?: Locale;
}

const copy = {
  he: {
    preview: 'הוצעה הצעה',
    heading: 'הספק הציע פתרון',
    offerLabel: 'פרטי ההצעה',
    body: 'הספק הציע פתרון לתיק שלך. בדוק את ההצעה ותחליט האם לקבל אותה.',
    caseIdLabel: 'מספר תיק',
    cta: 'צפה בהצעה',
    footer: 'מולטידיל — חיסכון אמיתי, באמת',
  },
  en: {
    preview: 'An offer was made',
    heading: 'Vendor made an offer',
    offerLabel: 'Offer details',
    body: 'The vendor has made an offer to resolve your case. Review the offer and decide whether to accept it.',
    caseIdLabel: 'Case ID',
    cta: 'View offer',
    footer: 'Multideal — Real deals, real savings',
  },
};

export function VendorOffered({
  caseId,
  offerSummary,
  caseUrl,
  locale = 'he',
}: VendorOfferedProps) {
  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' }}>
            {offerSummary && (
              <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.offerLabel}
                </Text>
                <Text
                  style={{
                    color: tokens.textPrimary,
                    fontSize: spacing.px14,
                    lineHeight: '1.5',
                    margin: 0,
                  }}
                >
                  {offerSummary}
                </Text>
              </Section>
            )}

            <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 VendorOffered;
