/**
 * ReviewRemovalDecision.tsx
 *
 * Sent to vendor when an admin approves or rejects a review removal request.
 * decision: 'APPROVED' → review was removed; 'REJECTED' → review stays visible.
 */

import {
  Html,
  Head,
  Body,
  Container,
  Section,
  Text,
  Link,
  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 ReviewRemovalDecisionProps {
  decision: 'APPROVED' | 'REJECTED';
  reviewBody: string;
  vendorName: string;
  dashboardUrl: string;
  locale?: Locale;
}

const copy = {
  he: {
    approved: {
      preview: 'הביקורת הוסרה - ההחלטה אושרה',
      heading: 'הביקורת הוסרה',
      body: (snippet: string) =>
        `בקשת ההסרה שלך לגבי הביקורת "${snippet}" אושרה. הביקורת הוסרה מהפלטפורמה.`,
      cta: 'עבור ללוח הבקרה',
    },
    rejected: {
      preview: 'בקשת הסרת הביקורת נדחתה',
      heading: 'בקשת ההסרה נדחתה',
      body: (snippet: string) =>
        `בקשת ההסרה שלך לגבי הביקורת "${snippet}" נדחתה. הביקורת ממשיכה להיות מוצגת.`,
      cta: 'עבור ללוח הבקרה',
    },
  },
  en: {
    approved: {
      preview: 'Review removed - your removal request was approved',
      heading: 'Review Removed',
      body: (snippet: string) =>
        `Your removal request for the review "${snippet}" was approved. The review has been removed from the platform.`,
      cta: 'Go to dashboard',
    },
    rejected: {
      preview: 'Review removal request rejected',
      heading: 'Removal Request Rejected',
      body: (snippet: string) =>
        `Your removal request for the review "${snippet}" was rejected. The review remains visible.`,
      cta: 'Go to dashboard',
    },
  },
} as const;

export default function ReviewRemovalDecision({
  decision,
  reviewBody,
  vendorName: _vendorName,
  dashboardUrl,
  locale = 'he',
}: ReviewRemovalDecisionProps) {
  const t = copy[locale][decision === 'APPROVED' ? 'approved' : 'rejected'];
  const dir = dirForLocale(locale);
  const fontFamily = locale === 'he' ? fonts.he : fonts.en;
  const headerColor = decision === 'APPROVED' ? tokens.success700 : tokens.warning600;

  // Truncate review snippet to 80 chars for email clarity
  const snippet = reviewBody.length > 80 ? reviewBody.slice(0, 77).trimEnd() + '...' : reviewBody;

  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.cardMaxNarrow,
              margin: '0 auto',
              backgroundColor: tokens.surfaceBase,
              borderRadius: '8px',
              border: `1px solid ${tokens.borderDefault}`,
              overflow: 'hidden',
            }}
          >
            <Section
              style={{
                backgroundColor: headerColor,
                padding: spacing.padHeaderLg,
                textAlign: locale === 'he' ? 'right' : 'left',
              }}
            >
              <Text
                style={{
                  fontSize: spacing.px20,
                  fontWeight: 700,
                  color: tokens.brandOnPrimary,
                  fontFamily,
                  margin: '0',
                }}
              >
                {t.heading}
              </Text>
            </Section>

            <Section
              style={{
                padding: spacing.padSectionLg,
                direction: dir,
                textAlign: locale === 'he' ? 'right' : 'left',
              }}
            >
              <Text
                style={{
                  fontSize: spacing.px16,
                  color: tokens.textSecondary,
                  fontFamily,
                  margin: spacing.marginBottom24,
                  lineHeight: '1.6',
                }}
              >
                {t.body(snippet)}
              </Text>

              <Link
                href={dashboardUrl}
                style={{
                  backgroundColor: tokens.brandPrimary700,
                  color: tokens.brandOnPrimary,
                  padding: spacing.padButton,
                  borderRadius: '6px',
                  fontFamily,
                  fontSize: spacing.px15,
                  fontWeight: 600,
                  textDecoration: 'none',
                  display: 'inline-block',
                }}
              >
                {t.cta}
              </Link>
            </Section>
          </div>
        </Container>
      </Body>
    </Html>
  );
}
