/**
 * Squelette commun aux 2 templates Rubis : header rubis-deep avec brand
 * + container cream + footer "Émis via Rubis sur l'ongle" (cliquable
 * vers la landing publique).
 *
 * Approche : on stylé en inline via les `style` props que React Email
 * convertit en HTML inline (compatible tous mail clients y compris
 * Outlook). Pas de classes Tailwind ici — risquées en mail.
 */

import * as React from 'react'
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Section,
  Row,
  Column,
  Text,
  Link,
} from '@react-email/components'

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

type LayoutProps = {
  /** Aperçu dans la liste mail (Gmail preview text). */
  preview: string
  /** Nom commercial affiché dans le header (vendeur ou "Rubis"). */
  brandName: string
  /** Sous-titre header (ex: numéro de facture, date). Optionnel. */
  brandSubtitle?: string | null
  /** URL de la landing publique — lien dans le footer ("Rubis sur l'ongle"). */
  landingUrl?: string
  children: React.ReactNode
}

export function EmailLayout({
  preview,
  brandName,
  brandSubtitle,
  landingUrl,
  children,
}: LayoutProps) {
  return (
    <Html lang="fr">
      <Head>
        {/*
         * Force le mode clair sur les clients qui auto-invertissent en dark mode
         * (iOS Mail, Gmail mobile, Outlook.com web). Sans ces tags, les fonds
         * crème/blanc deviennent noirs et le header rubis-deep devient rose pâle.
         */}
        <meta name="color-scheme" content="light only" />
        <meta name="supported-color-schemes" content="light only" />
        <style
          // eslint-disable-next-line react/no-danger -- nécessaire dans <style>
          dangerouslySetInnerHTML={{
            __html: `
              :root {
                color-scheme: light only;
                supported-color-schemes: light only;
              }
              /* Outlook.com / Hotmail dark mode — force nos couleurs */
              [data-ogsc] body,
              [data-ogsb] body {
                background-color: ${BRAND.cream} !important;
              }
              [data-ogsc] .rubis-container,
              [data-ogsb] .rubis-container {
                background-color: ${BRAND.cream} !important;
              }
              [data-ogsc] .rubis-header,
              [data-ogsb] .rubis-header {
                background-color: ${BRAND.rubisDeep} !important;
              }
              [data-ogsc] .rubis-footer,
              [data-ogsb] .rubis-footer {
                background-color: ${BRAND.cream2} !important;
              }
            `,
          }}
        />
      </Head>
      <Preview>{preview}</Preview>
      <Body style={bodyStyle} className="rubis-body">
        <Container style={containerStyle} className="rubis-container">
          {/* Bandeau rubis-deep avec gem ◆ + brand */}
          <Section style={headerStyle} className="rubis-header">
            <Row>
              <Column style={{ verticalAlign: 'middle' }}>
                <Text style={headerBrandStyle}>
                  <span style={gemStyle}>◆</span>
                  {brandName}
                </Text>
                {brandSubtitle ? (
                  <Text style={headerSubtitleStyle}>{brandSubtitle}</Text>
                ) : null}
              </Column>
            </Row>
          </Section>

          {/* Corps de l'email */}
          <Section style={contentStyle}>{children}</Section>

          {/* Footer Rubis — "Rubis sur l'ongle" cliquable vers la landing */}
          <Section style={footerStyle} className="rubis-footer">
            <Text style={footerTextStyle}>
              Émis via{' '}
              {landingUrl ? (
                <Link href={landingUrl} style={footerLinkStyle}>
                  Rubis sur l&apos;ongle
                </Link>
              ) : (
                <strong style={{ color: BRAND.ink2 }}>Rubis sur l&apos;ongle</strong>
              )}
              {' — '}
              <span style={{ color: BRAND.ink3 }}>
                vos factures relancées toutes seules pendant que vous travaillez.
              </span>
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  )
}

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

const bodyStyle: React.CSSProperties = {
  backgroundColor: BRAND.cream,
  fontFamily: BRAND.fontBody,
  margin: 0,
  padding: 0,
  color: BRAND.ink,
}

const containerStyle: React.CSSProperties = {
  // Fond crème pour que toute la zone du mail soit dans la palette
  // (au lieu d'un container blanc flottant sur cream). Le header
  // rubis-deep et le footer cream2 gardent leur couleur dédiée.
  backgroundColor: BRAND.cream,
  margin: '0 auto',
  maxWidth: '560px',
  overflow: 'hidden',
}

const headerStyle: React.CSSProperties = {
  backgroundColor: BRAND.rubisDeep,
  padding: `${sp.xl} ${sp.xl}`,
}

const headerBrandStyle: React.CSSProperties = {
  color: BRAND.white,
  fontSize: '20px',
  fontWeight: 800,
  letterSpacing: '-0.01em',
  margin: 0,
  lineHeight: '1.1',
}

const gemStyle: React.CSSProperties = {
  display: 'inline-block',
  marginRight: sp.sm,
  color: BRAND.rubisGlow,
  fontSize: '18px',
  verticalAlign: '-1px',
}

const headerSubtitleStyle: React.CSSProperties = {
  color: BRAND.cream2,
  fontSize: '12px',
  margin: `${sp.xs} 0 0 0`,
  letterSpacing: '0.04em',
  textTransform: 'uppercase',
  fontWeight: 600,
}

const contentStyle: React.CSSProperties = {
  padding: `${sp.xl} ${sp.xl}`,
}

const footerStyle: React.CSSProperties = {
  borderTop: `1px solid ${BRAND.line}`,
  backgroundColor: BRAND.cream2,
  padding: `${sp.lg} ${sp.xl}`,
}

const footerTextStyle: React.CSSProperties = {
  color: BRAND.ink3,
  fontSize: '11px',
  lineHeight: '1.5',
  margin: 0,
  textAlign: 'center',
}

const footerLinkStyle: React.CSSProperties = {
  color: BRAND.rubis,
  fontWeight: 600,
  textDecoration: 'none',
}
