export type ComponentRecord = {
  id: number;
  name: string;
  slug: string;
  category: string | null;
  content: Record<string, unknown> | null;
  created_at: string;
  updated_at: string;
  archived_at?: string | null;
};

export type PageBlock = {
  /** Unique per placement on a page. Same componentSlug may appear many times. */
  instanceId?: string;
  componentId: number;
  componentName: string;
  /** Registry slug — persisted so preview/live resolve the correct block after paste. */
  componentSlug?: string;
  content: Record<string, unknown>;
};

export type SectionWidth = "full" | "container";
export type SectionLayout =
  | "100"
  | "50-50"
  | "33-33-33"
  | "25-25-25-25"
  | "66-33"
  | "33-66"
  | "25-75"
  | "75-25"
  | "25-25-50"
  | "50-25-25"
  | "25-50-25";

export type SectionSpacing = {
  top?: string;
  right?: string;
  bottom?: string;
  left?: string;
};

export type SectionBreakpointKey = "desktop" | "tablet" | "mobile";

/** Per-breakpoint layout and spacing (stored independently). */
export type SectionBreakpointSettings = {
  padding?: SectionSpacing;
  margin?: SectionSpacing;
  maxWidth?: string;
  containerPaddingX?: string;
  textAlign?: string;
  fontSize?: string;
  /** Overrides section.width for this breakpoint when set. */
  width?: SectionWidth;
};

/** Per-section visual settings persisted in page content JSON. */
export type SectionStyleSettings = {
  backgroundColor?: string;
  backgroundImage?: string;
  backgroundSize?: string;
  backgroundPosition?: string;
  borderRadius?: string;
  borderColor?: string;
  borderWidth?: string;
  boxShadow?: string;
  breakpoints: Record<SectionBreakpointKey, SectionBreakpointSettings>;
};

export type PageSection = {
  width: SectionWidth;
  layout: SectionLayout;
  blocks: PageBlock[];
  /** Stable id for editor preview + responsive CSS vars. */
  id?: string;
  style?: SectionStyleSettings;
};

export type PageRecord = {
  id: number;
  title: string;
  slug: string;
  content: PageBlock[] | PageSection[];
  /** Page-level options (e.g. showFooter). */
  settings?: {
    /** Default true — show the site default footer. */
    showFooter?: boolean;
  } | null;
  status: string;
  created_at: string;
  updated_at: string;
};