:root {
  --ev-bg: #000000;
  --ev-text: #f5f5f7;
  --ev-accent: #0071e3;
  --ev-muted: #86868b;
  --ev-radius: 18px;
  --ev-transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --ev-bg: #f5f5f7;
  --ev-text: #1d1d1f;
}

.exploded-view {
  background: var(--ev-bg);
  color: var(--ev-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  min-height: 100vh;
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.ev-header {
  text-align: center;
  margin-bottom: 80px;
}

.ev-badge {
  display: inline-block;
  color: var(--ev-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ev-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px 0;
}

.ev-subtitle {
  font-size: 21px;
  color: var(--ev-muted);
  font-weight: 400;
  margin: 0;
}

.ev-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 80px;
}

.ev-gallery img {
  width: 100%;
  border-radius: var(--ev-radius);
  transition: transform var(--ev-transition);
}

.ev-gallery img:hover {
  transform: scale(1.03);
}

.ev-video-wrapper {
  margin: 0 auto 80px;
  max-width: 900px;
  border-radius: var(--ev-radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ev-video-wrapper video {
  width: 100%;
  display: block;
}

.ev-specs {
  margin-bottom: 80px;
}

.ev-specs-title {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
}

.ev-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--ev-muted);
  border-radius: var(--ev-radius);
  overflow: hidden;
}

.ev-specs-grid .ev-spec-item {
  background: var(--ev-bg);
  padding: 24px;
}

.ev-spec-item .spec-label {
  font-size: 12px;
  color: var(--ev-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ev-spec-item .spec-value {
  font-size: 17px;
  font-weight: 600;
}

.ev-footer {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(134, 134, 139, 0.2);
}

.ev-footer-text {
  font-size: 14px;
  color: var(--ev-muted);
}

import json
import shutil
import subprocess
import sys
from pathlib import Path
from dataclasses import dataclass, field


@dataclass
class ProductInput:
    name: str
    tagline: str
    badge: str
    color_theme: str
    specs: dict[str, str]
    images: list[dict[str, str]]
    footer_text: str
    hero_image_url: str


@dataclass
class SkillConfig:
    steps: list[dict]
    models: dict[str, str]
    merge: dict[str, str]


def load_config(config_path: Path) -> SkillConfig:
    with open(config_path) as f:
        raw = json.load(f)
    return SkillConfig(steps=raw["steps"], models=raw["models"], merge=raw["merge"])


def load_template(template_path: Path) -> str:
    return template_path.read_text(encoding="utf-8")


def fill_html_template(template: str, product: ProductInput) -> str:
    images_html = "\n".join(
        f'      <img src="{img["url"]}" alt="{img["alt"]}" loading="lazy">'
        for img in product.images
    )

    specs_html = "\n".join(
        f"""        <div class="ev-spec-item">
          <div class="spec-label">{label}</div>
          <div class="spec-value">{value}</div>
        </div>"""
        for label, value in product.specs.items()
    )

    return (
        template.replace("{{ COLOR_THEME }}", product.color_theme)
        .replace("{{ PRODUCT_NAME }}", product.name)
        .replace("{{ PRODUCT_TAGLINE }}", product.tagline)
        .replace("{{ BADGE_TEXT }}", product.badge)
        .replace("{{ PRODUCT_IMAGES }}", images_html)
        .replace("{{ SPECS_TABLE }}", specs_html)
        .replace("{{ FOOTER_TEXT }}", product.footer_text)
        .replace("{{ VIDEO_SLOT }}", "")
    )


def call_ai_model(prompt: str, model: str, template: str) -> str:
    result = subprocess.run(
        [
            "openclaw", "run",
            "--model", model,
            "--prompt", prompt,
            "--template", template,
            "--output-format", "text",
        ],
        capture_output=True,
        text=True,
        timeout=120,
    )
    if result.returncode != 0:
        raise RuntimeError(f"模型调用失败: {result.stderr}")
    return result.stdout.strip()


def validate_html(html: str, required_selectors: list[str]) -> list[str]:
    errors = []
    for selector in required_selectors:
        if selector not in html:
            errors.append(f"缺少必要选择器: {selector}")
    size_kb = len(html.encode("utf-8")) / 1024
    if size_kb > 500:
        errors.append(f"HTML 过大: {size_kb:.1f}KB (限制 500KB)")
    return errors


def generate_html_step(
    prompt_template: str,
    html_template: str,
    product: ProductInput,
    model: str,
    retry: int,
) -> str:
    filled_prompt = prompt_template.format(
        product_name=product.name,
        tagline=product.tagline,
        badge=product.badge,
        color_theme=product.color_theme,
        specs=json.dumps(product.specs, ensure_ascii=False),
        images=json.dumps(product.images, ensure_ascii=False),
        footer_text=product.footer_text,
    )

    for attempt in range(retry):
        print(f"  HTML 生成尝试 {attempt + 1}/{retry}...")
        raw_output = call_ai_model(filled_prompt, model, html_template)

        if raw_output.startswith("<!DOCTYPE html>"):
            return raw_output

        print(f"  输出不是有效 HTML，重试...")

    raise RuntimeError(f"HTML 生成失败，已重试 {retry} 次")


def generate_video_step(
    prompt_template: str,
    product: ProductInput,
    model: str,
    retry: int,
) -> str:
    filled_prompt = prompt_template.format(
        product_name=product.name,
        hero_image_url=product.hero_image_url,
        color_theme=product.color_theme,
    )

    for attempt in range(retry):
        print(f"  视频生成尝试 {attempt + 1}/{retry}...")
        video_path = call_ai_model(filled_prompt, model, "")
        if video_path.endswith(".mp4"):
            return video_path
        print(f"  输出不是 mp4 路径，重试...")

    raise RuntimeError(f"视频生成失败，已重试 {retry} 次")


def merge_html_and_video(html: str, video_path: str, placeholder: str) -> str:
    video_block = f"""<section class="ev-video-wrapper">
      <video src="{video_path}" autoplay loop muted playsinline></video>
    </section>"""
    return html.replace(placeholder, video_block)


def generate(product: ProductInput, project_dir: Path) -> Path:
    config = load_config(project_dir / "skill.json")
    html_template = load_template(project_dir / "templates" / "page.html")
    style_css = load_template(project_dir / "templates" / "style.css")

    html_step = config.steps[0]
    video_step = config.steps[1]

    prompt_html = (project_dir / html_step["prompt_file"]).read_text(encoding="utf-8")
    prompt_video = (project_dir / video_step["prompt_file"]).read_text(encoding="utf-8")

    print(f"[1/3] 生成静态网页...")
    html = generate_html_step(
        prompt_html, html_template, product,
        config.models["text"], html_step["retry"],
    )

    errors = validate_html(html, html_step["validate"]["required_selectors"])
    if errors:
        for e in errors:
            print(f"  验证错误: {e}")
        raise RuntimeError("HTML 验证失败")

    print(f"[2/3] 生成首尾帧视频...")
    video_path = generate_video_step(
        prompt_video, product,
        config.models["video"], video_step["retry"],
    )

    print(f"[3/3] 融合网页和视频...")
    final_html = merge_html_and_video(
        html, video_path, config.merge["placeholder"],
    )

    output_dir = project_dir / "output"
    output_dir.mkdir(exist_ok=True)

    product_slug = product.name.lower().replace(" ", "-")
    page_dir = output_dir / product_slug
    page_dir.mkdir(exist_ok=True)

    (page_dir / "index.html").write_text(final_html, encoding="utf-8")
    shutil.copy(project_dir / "templates" / "style.css", page_dir / "style.css")
    shutil.copy(video_path, page_dir / Path(video_path).name)

    return page_dir


if __name__ == "__main__":
    product = ProductInput(
        name="iPhone 17 Pro",
        tagline="钛金属。钛强大。",
        badge="全新发布",
        color_theme="dark",
        specs={
            "芯片": "A19 Pro",
            "显示屏": "6.7 英寸 Super Retina XDR",
            "摄像头": "48MP Fusion 系统",
            "材质": "钛金属设计",
            "电池": "视频播放最长 29 小时",
            "系统": "iOS 21",
        },
        images=[
            {"url": "https://example.com/iphone-front.png", "alt": "正面视图"},
            {"url": "https://example.com/iphone-back.png", "alt": "背面视图"},
            {"url": "https://example.com/iphone-side.png", "alt": "侧面视图"},
            {"url": "https://example.com/iphone-angle.png", "alt": "45° 视角"},
        ],
        footer_text="© 2026 Apple Inc. 保留所有权利。",
        hero_image_url="https://example.com/iphone-hero.png",
    )

    project_dir = Path(__file__).resolve().parent.parent
    try:
        output_path = generate(product, project_dir)
        print(f"✓ 生成完成: {output_path}")
    except RuntimeError as e:
        print(f"✗ 生成失败: {e}", file=sys.stderr)
        sys.exit(1)