/**
 * Types for the website capture pipeline.
 *
 * Phase 1: Capture — Extract HTML, CSS, screenshots, tokens, assets from a URL
 * Phase 2: Split — Decompose into per-section sub-compositions
 * Phase 3: Verify — Validate each section renders correctly
 * Phase 4: Scaffold — Assemble standard HyperFrames project
 */

// ── Phase 1: Capture ────────────────────────────────────────────────────────

export interface CaptureOptions {
  /** URL to capture */
  url: string;
  /** Output directory */
  outputDir: string;
  /** Viewport width (default: 1920) */
  viewportWidth?: number;
  /** Viewport height (default: 1080) */
  viewportHeight?: number;
  /** Page load timeout in ms (default: 120000) */
  timeout?: number;
  /** Extra wait after load for JS to settle (default: 3000) */
  settleTime?: number;
  /** Maximum screenshots to take (default: 24) */
  maxScreenshots?: number;
  /** Skip asset downloads */
  skipAssets?: boolean;
  /** Output JSON for programmatic use */
  json?: boolean;
}

export interface CaptureResult {
  /** Whether capture completed successfully */
  ok: boolean;
  /** Project output directory */
  projectDir: string;
  /** Source URL */
  url: string;
  /** Page title */
  title: string;
  /** Extracted HTML data */
  extracted: ExtractedHtml;
  /** Screenshot file paths (relative to projectDir) */
  screenshots: string[];
  /** Design tokens extracted from the page */
  tokens: DesignTokens;
  /** Downloaded asset paths (relative to projectDir) */
  assets: DownloadedAsset[];
  /** Animation catalog (captured during full-JS page load) */
  animationCatalog?: import("./animationCataloger.js").AnimationCatalog;
  /** Errors/warnings encountered during capture */
  warnings: string[];
}

export interface ExtractedHtml {
  /** All <style> tags from <head> (after stylesheet inlining) */
  headHtml: string;
  /** Full document.body.innerHTML */
  bodyHtml: string;
  /** CSS-in-JS rules from document.styleSheets (CSSOM) */
  cssomRules: string;
  /** <html> element attributes (class, data-theme, style, lang) */
  htmlAttrs: string;
  /** Original viewport width during capture */
  viewportWidth: number;
  /** Original viewport height during capture */
  viewportHeight: number;
  /** Full page scroll height */
  fullPageHeight: number;
}

// ── Design Tokens ───────────────────────────────────────────────────────────

export interface DesignTokens {
  /** Page title */
  title: string;
  /** Meta description */
  description: string;
  /** OG image URL */
  ogImage?: string;
  /** CSS custom properties from :root */
  cssVariables: Record<string, string>;
  /** Font families in use */
  fonts: string[];
  /** Extracted colors (background, text, accent) */
  colors: string[];
  /** Headings with text and basic styles */
  headings: Array<{
    level: number;
    text: string;
    fontSize: string;
    fontWeight: string;
    color: string;
  }>;
  /** Paragraph text (first 10) */
  paragraphs: string[];
  /** CTA button/link text */
  ctas: Array<{ text: string; href?: string }>;
  /** SVG elements with labels */
  svgs: Array<{
    label?: string;
    viewBox?: string;
    outerHTML: string;
    isLogo: boolean;
  }>;
  /** Large images on the page */
  images: Array<{
    src: string;
    alt: string;
    width: number;
    height: number;
  }>;
  /** Favicon/icon URLs */
  icons: Array<{ rel: string; href: string }>;
  /** Detected page sections with bounding rects */
  sections: Array<{
    selector: string;
    type: string;
    y: number;
    height: number;
    heading: string;
    backgroundColor?: string;
  }>;
}

// ── Assets ──────────────────────────────────────────────────────────────────

export interface DownloadedAsset {
  /** Original URL */
  url: string;
  /** Local file path (relative to projectDir) */
  localPath: string;
  /** Asset type */
  type: "svg" | "image" | "favicon";
}
