import { getLocale, getTranslations } from 'next-intl/server';
import { Box, Container, Divider, Stack, Typography } from '@mui/material';
import { AppButton, AppIcon, AppLink, CategoryTile, EscrowNotice, SurfaceCard } from '@/components';
import BrandMark from '@/components/auth/BrandMark';
import { ROUTES } from '@/constants';

const CATEGORY_ICON_KEYS = ['elderly', 'post_surgery', 'infant', 'chronic', 'companionship'] as const;

const HOW_IT_WORKS_STEPS = [
  { icon: 'search', titleKey: 'step1_title', bodyKey: 'step1_body' },
  { icon: 'lock', titleKey: 'step2_title', bodyKey: null },
  { icon: 'verified', titleKey: 'step3_title', bodyKey: 'step3_body' },
] as const;

const TRUST_ROWS = [
  { icon: 'identity', titleKey: 'trust_identity_title', bodyKey: 'trust_identity_body' },
  { icon: 'license', titleKey: 'trust_license_title', bodyKey: 'trust_license_body' },
  { icon: 'verification', titleKey: 'trust_ino_title', bodyKey: 'trust_ino_body' },
  { icon: 'bank', titleKey: 'trust_bank_title', bodyKey: 'trust_bank_body' },
] as const;

/**
 * The public front door (ui-phase-13) — a marketing landing served AT `/` for a guest visitor via
 * a middleware rewrite (see `middleware.ts`; the URL/canonical stays `/`, never `/welcome`).
 * Deliberately a Server Component with no query hooks anywhere in the tree: first paint is the
 * whole product here, so the page must never wait on an API call (§3.5 — RSC-first, zero
 * client-side data fetching). The only client leaves it composes (`CategoryTile`, `EscrowNotice`,
 * `BrandMark`, `AppLink`/`AppButton`) are static-content components that fetch nothing.
 * @component WelcomeScreen
 */
export default async function WelcomeScreen() {
  const locale = await getLocale();
  const t = await getTranslations('welcome');
  const tLegal = await getTranslations('legal');

  const loginHref = `/${locale}${ROUTES.LOGIN}`;
  const nurseLoginHref = `/${locale}${ROUTES.LOGIN}?role=nurse`;
  const termsHref = `/${locale}${ROUTES.TERMS}`;
  const privacyHref = `/${locale}${ROUTES.PRIVACY}`;

  return (
    <Container maxWidth="sm" sx={{ py: { xs: 4, md: 6 } }}>
      <Stack sx={{ gap: { xs: 6, md: 8 } }}>
        {/* Hero */}
        <Stack component="header" sx={{ alignItems: 'center', textAlign: 'center', gap: 2 }}>
          <BrandMark withTagline />
          <Typography variant="body1" sx={{ color: 'text.secondary', maxWidth: 420 }}>
            {t('hero_subtitle')}
          </Typography>
          <AppButton to={loginHref} color="primary" variant="contained" size="large" sx={{ mt: 1, px: 4 }}>
            {t('hero_cta')}
          </AppButton>
        </Stack>

        {/* Category grid — static i18n content, not the live catalog (§3.1 tier a+b decision) */}
        <Stack component="section" sx={{ gap: 2 }}>
          <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
            {t('categories_title')}
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)' }, gap: 1.5 }}>
            {CATEGORY_ICON_KEYS.map((key) => (
              <CategoryTile key={key} label={t(`category_${key}`)} iconKey={key} href={loginHref} />
            ))}
          </Box>
        </Stack>

        {/* How it works */}
        <Stack component="section" sx={{ gap: 2.5 }}>
          <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
            {t('how_it_works_title')}
          </Typography>
          <Stack sx={{ gap: 2.5 }}>
            {HOW_IT_WORKS_STEPS.map((step, index) => (
              <Stack key={step.titleKey} direction="row" sx={{ gap: 2, alignItems: 'flex-start' }}>
                <Box
                  sx={{
                    flexShrink: 0,
                    width: 40,
                    height: 40,
                    borderRadius: '50%',
                    bgcolor: 'var(--bal-primary-soft)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <AppIcon icon={step.icon} size={22} color="var(--bal-primary)" aria-hidden="true" />
                </Box>
                <Stack sx={{ gap: 0.75, flex: 1, pt: 0.5 }}>
                  <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                    {index + 1}. {t(step.titleKey)}
                  </Typography>
                  {step.bodyKey ? (
                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                      {t(step.bodyKey)}
                    </Typography>
                  ) : (
                    // Step 2 (escrow) reuses the product-mandated verbatim EscrowNotice copy —
                    // never a paraphrase (§3.2).
                    <EscrowNotice />
                  )}
                </Stack>
              </Stack>
            ))}
          </Stack>
        </Stack>

        {/* Trust / verification explainer */}
        <Stack component="section" sx={{ gap: 2 }}>
          <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
            {t('trust_title')}
          </Typography>
          <SurfaceCard padding="lg">
            <Stack sx={{ gap: 2.5 }}>
              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                {t('trust_intro')}
              </Typography>
              {TRUST_ROWS.map((row) => (
                <Stack key={row.titleKey} direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
                  <AppIcon
                    icon={row.icon}
                    size={20}
                    color="var(--bal-trust)"
                    style={{ flexShrink: 0, marginTop: 2 }}
                    aria-hidden="true"
                  />
                  <Stack sx={{ gap: 0.25 }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
                      {t(row.titleKey)}
                    </Typography>
                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                      {t(row.bodyKey)}
                    </Typography>
                  </Stack>
                </Stack>
              ))}
            </Stack>
          </SurfaceCard>
        </Stack>

        {/* Nurse recruitment */}
        <SurfaceCard padding="lg" sx={{ bgcolor: 'var(--bal-primary-soft)', borderColor: 'var(--bal-primary)' }}>
          <Stack sx={{ gap: 1.5, alignItems: 'flex-start' }}>
            <Typography variant="h6" component="h2" sx={{ fontWeight: 700 }}>
              {t('nurse_cta_title')}
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {t('nurse_cta_body')}
            </Typography>
            <AppButton to={nurseLoginHref} color="primary" variant="outlined">
              {t('nurse_cta_button')}
            </AppButton>
          </Stack>
        </SurfaceCard>

        {/* Footer */}
        <Stack component="footer" sx={{ gap: 2 }}>
          <Divider />
          <Stack direction="row" sx={{ gap: 3, flexWrap: 'wrap' }}>
            <AppLink to={termsHref} color="text.secondary" underline="hover">
              {tLegal('terms_title')}
            </AppLink>
            <AppLink to={privacyHref} color="text.secondary" underline="hover">
              {tLegal('privacy_title')}
            </AppLink>
          </Stack>
          <Stack sx={{ gap: 0.5 }}>
            <Typography variant="caption" sx={{ fontWeight: 700, color: 'text.secondary' }}>
              {t('footer_contact_title')}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {t('footer_contact_body')}
            </Typography>
          </Stack>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('footer_copyright', { year: new Date().getFullYear() })}
          </Typography>
        </Stack>
      </Stack>
    </Container>
  );
}
