import type { ReactNode } from 'react'
import { Box, Paper, Stack, Text, Title } from '@pikku/mantine/core'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import { asI18n } from '@pikku/react'
import type { I18nNode } from '@pikku/react'

function QSeal({ size = 30, fontSize = 17, bg = '#1F5641', color = '#FBFAF7', radius = 7 }: {
  size?: number; fontSize?: number; bg?: string; color?: string; radius?: number
}) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: radius,
      background: bg, color, flexShrink: 0,
      fontFamily: "'Source Serif 4', Georgia, serif",
      fontWeight: 600, fontSize, lineHeight: 1,
    }}>
      Q
    </span>
  )
}

function BrandPanel({ tagline }: { tagline: I18nNode }) {
  useLocale()
  return (
    <Box style={{
      position: 'relative', overflow: 'hidden', flex: 1,
      background: '#0E1F18',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 56, minHeight: '100vh',
    }}>
      <Box style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(700px 460px at 70% 25%, rgba(46,111,84,.32), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <Box style={{ position: 'relative', maxWidth: 420 }}>
        <Box style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 56, height: 56, borderRadius: 14,
          border: '1px solid rgba(235,197,122,.4)', marginBottom: 28,
          fontFamily: "'Source Serif 4', Georgia, serif",
          fontSize: 26, color: '#EBC57A', fontWeight: 600,
        }}>
          §
        </Box>

        <Title order={2} style={{
          fontFamily: "'Source Serif 4', Georgia, serif",
          fontWeight: 380, fontSize: 'clamp(1.6rem, 2.4vw, 2.125rem)',
          lineHeight: 1.22, color: '#F4F1E9', letterSpacing: '-.02em', margin: 0,
        }}>
          {m.auth_brand_headline_line1()}
          <br />
          <span style={{ fontStyle: 'italic', color: '#8FCBA9' }}>
            {m.auth_brand_headline_line2()}
          </span>
        </Title>

        <Text size="sm" style={{ marginTop: 22, lineHeight: 1.7, color: 'rgba(244,241,233,.6)' }}>
          {tagline}
        </Text>

        {/* Mini resolution card */}
        <Box style={{
          marginTop: 36, background: '#FBFAF7', borderRadius: 4,
          transform: 'rotate(-.8deg)',
          boxShadow: '0 24px 60px -20px rgba(0,0,0,.5)',
          overflow: 'hidden',
        }}>
          <Box style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '14px 18px', borderBottom: '1px solid #EFEDE6',
          }}>
            <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#8A938C' }}>
              {asI18n('BESCHLUSS · 2026-014')}
            </Text>
            <Box style={{
              fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
              fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase',
              color: '#1F5641', background: '#E7F0EA', padding: '3px 8px', borderRadius: 20,
            }}>
              Published
            </Box>
          </Box>
          <Box style={{ padding: '16px 18px' }}>
            <Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 15, fontWeight: 600, color: '#16201B', marginBottom: 10 }}>
              {asI18n('Appropriation of 2025 result')}
            </Text>
            <Box style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderTop: '1px solid #EFEDE6' }}>
              <Text size="xs" style={{ color: '#6B736C' }}>{asI18n('Distributable profit')}</Text>
              <Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, fontWeight: 600, color: '#16201B' }}>{asI18n('€ 248,500.00')}</Text>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

export function AuthLayout({
  title,
  subtitle,
  tagline,
  children,
  footer,
}: {
  title: I18nNode
  subtitle?: I18nNode
  tagline: I18nNode
  children: ReactNode
  footer?: I18nNode
}) {
  return (
    <Box style={{ display: 'flex', minHeight: '100vh' }}>
      {/* Form side */}
      <Box style={{
        width: 560, flexShrink: 0,
        background: '#fff', borderRight: '1px solid #E6E3DB',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 48,
      }}>
        <Paper p={0} w="100%" maw={360} bg="transparent">
          <Stack gap="lg">
            <Box style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <QSeal />
              <Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 19, fontWeight: 600, color: '#16201B' }}>
                {m.common_brand_name()}
              </Text>
            </Box>

            <div>
              <Title order={2} style={{
                fontFamily: "'Source Serif 4', Georgia, serif",
                fontSize: 30, fontWeight: 600, color: '#16201B', letterSpacing: '-.02em', marginBottom: 6,
              }}>
                {title}
              </Title>
              {subtitle && (
                <Text size="sm" style={{ color: '#6B736C' }}>
                  {subtitle}
                </Text>
              )}
            </div>
            {children}
            {footer && (
              <Text size="sm" style={{ color: '#6B736C' }} ta="center">
                {footer}
              </Text>
            )}
          </Stack>
        </Paper>
      </Box>

      {/* Brand side — hidden on mobile */}
      <Box display={{ base: 'none', md: 'flex' }} style={{ flex: 1 }}>
        <BrandPanel tagline={tagline} />
      </Box>
    </Box>
  )
}
