/**
 * shared/types.ts — Clone Architect Phase 5 Sprint 80/20
 * Contrat unique pour tous les types partagés (élimine divergences)
 */

// ─── SiteTokens (unifié — bank-register + retheme convergent) ────────────────

export interface SiteTokens {
  colors: {
    background: string;
    text: string;
    accent: string;
    border: string;
  };
  typography: {
    primary: string;
    secondary?: string;
    mono?: string;
  };
  borderRadius: {
    sm: string;
    md: string;
    full: string;
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl?: string;
  };
  isDark: boolean;
}

// ─── Bank types (source : bank-register.ts) ───────────────────────────────────

export interface ComponentSnapshot {
  id: string;
  domain: string;
  extractionPath: string;
  url: string;
  extractedAt: string;
  registeredAt: string;
  componentType: string;
  componentLabel: string;
  variantIndex: number;
  siteTokens: SiteTokens;
  styles: Record<string, any>;
  tags: string[];
  screenshotPath?: string;
  designMdPath?: string;
}

export interface BankIndexEntry {
  id: string;
  domain: string;
  type: string;
  label: string;
  tags: string[];
  accent: string;
  background: string;
  isDark: boolean;
  extractedAt: string;
  registeredAt: string;
}

export interface BankIndex {
  version: string;
  updatedAt: string;
  components: BankIndexEntry[];
}

export interface BankCatalog {
  version: string;
  updatedAt: string;
  byType: Record<string, string[]>;
  byDomain: Record<string, string[]>;
  byTags: Record<string, string[]>;
}

// ─── Block types (source : extract-block.ts) ──────────────────────────────────

export interface BlockNode {
  tag: string;
  classes: string[];
  id?: string;
  text: string;
  attributes: Record<string, string>;
  rect: { x: number; y: number; width: number; height: number };
  styles: Record<string, string>;
  children: BlockNode[];
}

export interface BlockExtraction {
  url: string;
  domain: string;
  selector: string;
  extractedAt: string;
  viewport: { width: number; height: number };
  rootNode: BlockNode;
  nodeCount: number;
  maxDepthReached: number;
  truncated: boolean;
  screenshotPath?: string;
}

// ─── Extraction types (Phase 1.3) — shared boundary types for raw-css.json data ─

/** Computed CSS styles extracted via getComputedStyle() — Playwright snapshot per element */
export interface ComputedStylesShared {
  backgroundColor?: string;
  backgroundImage?: string;
  color?: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
  lineHeight?: string;
  letterSpacing?: string;
  textAlign?: string;
  padding?: string;
  margin?: string;
  borderRadius?: string;
  border?: string;
  boxShadow?: string;
  width?: string;
  height?: string;
  display?: string;
  gap?: string;
  gridTemplateColumns?: string;
  flexDirection?: string;
  alignItems?: string;
  justifyContent?: string;
  position?: string;
  transition?: string;
  opacity?: string;
  textTransform?: string;
  [key: string]: string | undefined; // allow future props
}

export interface ElementExtractionShared {
  selector: string;
  tag: string;
  classes: string[];
  text: string;
  styles: ComputedStylesShared;
  children?: number;
  rect?: { x: number; y: number; width: number; height: number };
}

export interface SectionExtractionShared {
  index: number;
  tag: string;
  classes: string[];
  role?: string;
  estimatedPurpose?: string;
  rect?: { x: number; y: number; width: number; height: number };
  styles?: Partial<ComputedStylesShared> | Record<string, string>;
  childCount?: number;
}

export interface ComponentVariantShared {
  tag: string;
  classes: string[];
  text?: string;
  styles: ComputedStylesShared;
  rect?: { x: number; y: number; width: number; height: number };
}

/** Imagery profile extracted in Phase 0.2 */
export interface ImageryProfileShared {
  ogImage: string | null;
  ogImageWidth: number | null;
  ogImageHeight: number | null;
  twitterImage: string | null;
  heroImage: { src: string; alt: string; width: number; height: number; aspectRatio: number } | null;
  formats: { png: number; jpg: number; webp: number; svg: number; gif: number; other: number };
  totalImages: number;
  totalAboveFold: number;
  aspectRatioBuckets: { landscape: number; portrait: number; square: number; ultrawide: number };
  illustrationHeavy: boolean;
  photoHeavy: boolean;
  avgImageSize: { width: number; height: number };
}

/** Full viewport extraction = one snapshot at a specific viewport (desktop/mobile) */
export interface ViewportExtraction {
  url: string;
  domain: string;
  timestamp: string;
  viewport: { width: number; height: number };
  pageTitle: string;
  cssCustomProperties: Record<string, string>;
  elements: Record<string, ElementExtractionShared | null>;
  sections: SectionExtractionShared[];
  allColors: string[];
  allFontFamilies: string[];
  allFontSizes: string[];
  allBorderRadii: string[];
  allShadows: string[];
  allTransitions: string[];
  images: { src: string; alt: string; width: number; height: number }[];
  imageryProfile?: ImageryProfileShared;
  links: { href: string; text: string; isNav: boolean }[];
  componentVariants: Record<string, ComponentVariantShared[]>;
  componentStates: Record<string, Record<string, ComputedStylesShared>>;
  fontFaces: Array<{ family: string; src: string; weight: string; style: string; display: string }>;
  mediaBreakpoints: string[];
  openTypeFeatures: string[];
  variableAxes: string[];
  keyframes?: Record<string, Record<string, Record<string, string>>>;
  zIndexMap?: Array<{ selector: string; z: number; stackingRoot: string }>;
}

/** Top-level raw-css.json structure (desktop + optional mobile viewports) */
export interface RawCssData {
  desktop: ViewportExtraction;
  mobile?: ViewportExtraction;
  /** Optional schema version (Phase 1.2 added — undefined for pre-v2.4 archives) */
  version?: string;
}