'use client';

import React from 'react';

import { cn } from '@/lib/utils';

/* ============================================================================
   SECTION — the page-block shell.
   ----------------------------------------------------------------------------
   The body that every homepage block (and most interior-page blocks) hand-rolled:
   the outer <section>, the surface (bg + paired text tone), the site gutter,
   the vertical rhythm, and the boxed inner container. SectionHeader is its head;
   this is the rest of the body.

   Three orthogonal axes — mirror of the typography model:
     • surface  → the SKIN    (background + the text tone it forces)
     • spacing  → the RHYTHM  (vertical breathing room; one shared 3-step scale)
     • width    → the MEASURE (boxed to max-w-boxed, or full-bleed)

   `surface` also publishes a tone on context so a SectionHeader inside an `ink`
   section is light-on-dark automatically — you can't pair them wrong by hand.
   ========================================================================== */

export type SectionSurface = 'white' | 'paper' | 'mist' | 'ink';
export type SectionSpacing = 'compact' | 'default' | 'roomy';
export type SectionWidth = 'boxed' | 'full';
export type SectionGap = 'default' | 'loose';

/* surface → bg + the text tone it forces. paper/mist read from CSS tokens
   (see globals.css additions); white/ink reuse the existing brand tokens. */
const surfaceClass: Record<SectionSurface, string> = {
  white: 'bg-brand-secondary text-brand-primary',
  paper: 'bg-surface-paper text-brand-primary',
  mist: 'bg-surface-mist text-brand-primary',
  ink: 'bg-brand-primary text-brand-secondary',
};

/* one vertical-rhythm scale. Pick the DEFAULT per context, never new numbers:
   homepage/marketing → roomy, interior pages → default, dense detail → compact. */
const spacingClass: Record<SectionSpacing, string> = {
  compact: 'py-6 sm:py-8 lg:py-12', // 24 → 48
  default: 'py-14 sm:py-16 lg:py-20', // 56 → 80
  roomy: 'py-20 sm:py-24 lg:py-28', // 80 → 112
};

const gapClass: Record<SectionGap, string> = {
  default: 'space-y-8',
  loose: 'space-y-16',
};

const surfaceTone: Record<SectionSurface, 'light' | 'dark'> = {
  white: 'light',
  paper: 'light',
  mist: 'light',
  ink: 'dark',
};

/* context — lets SectionHeader (and anything else) inherit the right ink/paper
   text tone without every call site re-stating it. */
const SectionToneContext = React.createContext<'light' | 'dark'>('light');
export const useSectionTone = () => React.useContext(SectionToneContext);

export type SectionProps = {
  surface?: SectionSurface;
  spacing?: SectionSpacing;
  width?: SectionWidth;
  gap?: SectionGap;
  /** clip decorative overflow (bg grids, bleeding art). Adds overflow-hidden. */
  clip?: boolean;
  /** full-bleed decoration rendered BEHIND the boxed content and edge-to-edge
   *  (bg grids, gradients, bleeding art) — not constrained to max-w-boxed. */
  backdrop?: React.ReactNode;
  /** opt out of the boxed inner wrapper entirely (rare — full custom layouts). */
  bare?: boolean;
  as?: 'section' | 'div' | 'article';
  className?: string;
  /** className for the inner boxed container (e.g. a one-off grid). */
  innerClassName?: string;
  children?: React.ReactNode;
} & Omit<React.HTMLAttributes<HTMLElement>, 'color'>;

const Section: React.FC<SectionProps> = ({
  surface = 'white',
  spacing = 'default',
  width = 'boxed',
  gap = 'default',
  clip = false,
  backdrop,
  bare = false,
  as: Tag = 'section',
  className,
  innerClassName,
  children,
  ...rest
}) => {
  const inner = bare ? (
    children
  ) : (
    <div
      className={cn(
        'relative w-full',
        width === 'boxed' && 'mx-auto max-w-boxed',
        gapClass[gap],
        innerClassName
      )}
    >
      {children}
    </div>
  );

  return (
    <SectionToneContext.Provider value={surfaceTone[surface]}>
      <Tag
        className={cn(
          'relative w-full px-site',
          surfaceClass[surface],
          spacingClass[spacing],
          clip && 'overflow-hidden',
          className
        )}
        {...rest}
      >
        {backdrop}
        {inner}
      </Tag>
    </SectionToneContext.Provider>
  );
};

export default Section;