/**
 * Template email de remerciement — envoyé AU CLIENT FINAL après que
 * l'utilisateur a confirmé le paiement (via check-in « Oui, payé » ou
 * mark-paid manuel).
 *
 * Mise en page volontairement plus douce que la relance :
 *  - bandeau header rubis-deep avec un check ✓ pour signaler "tout est OK"
 *  - body interpolé (le user a écrit le mot, on garde sa voix)
 *  - card récap discrète : facture, montant — pas de date d'échéance ni
 *    de retard, on est passé à autre chose.
 */

import * as React from 'react'
import { Section, Text } from '@react-email/components'

import { BRAND, sp } from './_brand.js'
import { EmailLayout } from './_layout.js'

export type PaymentThanksEmailProps = {
  /** Nom commercial visible côté client (l'org du user). */
  brandName: string
  invoice: {
    numero: string
    amountFormatted: string
  }
  /** Texte de remerciement (déjà interpolé) — le mot du user. */
  bodyText: string
  /** URL landing publique (footer cliquable « Rubis sur l'ongle »). */
  landingUrl?: string
}

export function PaymentThanksEmail({
  brandName,
  invoice,
  bodyText,
  landingUrl,
}: PaymentThanksEmailProps) {
  return (
    <EmailLayout
      preview={`Paiement reçu — facture ${invoice.numero} (${invoice.amountFormatted})`}
      brandName={brandName}
      brandSubtitle={`Paiement reçu · ${invoice.numero}`}
      landingUrl={landingUrl}
    >
      {/* Petit check visuel pour signaler positivement "c'est bon". */}
      <Section style={checkBadgeWrapStyle}>
        <span style={checkBadgeStyle} aria-hidden="true">
          ✓
        </span>
      </Section>

      <Text style={bodyTextStyle}>{bodyText}</Text>

      <Section style={summaryCardStyle}>
        <Text style={summaryRowStyle}>
          <span style={summaryLabelStyle}>Facture</span>
          <span style={summaryValueStyle}>{invoice.numero}</span>
        </Text>
        <Text style={summaryRowStyle}>
          <span style={summaryLabelStyle}>Montant TTC</span>
          <span
            style={{
              ...summaryValueStyle,
              fontSize: '18px',
              fontWeight: 800,
              fontVariantNumeric: 'tabular-nums',
            }}
          >
            {invoice.amountFormatted}
          </span>
        </Text>
        <Text style={summaryRowStyle}>
          <span style={summaryLabelStyle}>Statut</span>
          <span style={{ ...summaryValueStyle, color: BRAND.rubis }}>Réglée</span>
        </Text>
      </Section>
    </EmailLayout>
  )
}

// ---------------------------------------------------------------------------
// Styles inline
// ---------------------------------------------------------------------------

const checkBadgeWrapStyle: React.CSSProperties = {
  textAlign: 'center',
  margin: `0 0 ${sp.lg} 0`,
}

const checkBadgeStyle: React.CSSProperties = {
  display: 'inline-block',
  width: '44px',
  height: '44px',
  lineHeight: '44px',
  textAlign: 'center',
  borderRadius: '999px',
  backgroundColor: BRAND.rubisGlow,
  color: BRAND.rubisDeep,
  fontSize: '22px',
  fontWeight: 800,
}

const bodyTextStyle: React.CSSProperties = {
  color: BRAND.ink,
  fontSize: '15px',
  lineHeight: '1.6',
  margin: `0 0 ${sp.xl} 0`,
  whiteSpace: 'pre-line',
}

const summaryCardStyle: React.CSSProperties = {
  backgroundColor: BRAND.white,
  border: `1px solid ${BRAND.line}`,
  borderRadius: BRAND.radiusCard,
  padding: `${sp.md} ${sp.lg}`,
  margin: `${sp.lg} 0 0 0`,
}

const summaryRowStyle: React.CSSProperties = {
  display: 'block',
  margin: `${sp.sm} 0`,
  fontSize: '13px',
  lineHeight: '1.4',
}

const summaryLabelStyle: React.CSSProperties = {
  display: 'inline-block',
  width: '110px',
  color: BRAND.ink3,
  fontWeight: 500,
}

const summaryValueStyle: React.CSSProperties = {
  color: BRAND.ink,
  fontWeight: 600,
}
