import Image from "next/image";
import Link from "next/link";
import { BossAiMotion } from "./BossAiMotion";

const platformItems = [
  {
    title: "统一 API 网关",
    eyebrow: "Gateway",
    body: "OpenAI、Claude Messages、Gemini、方舟、图像、视频和语音接口统一到一套入口。",
    metric: "/v1",
    signal: "Ingress",
    port: "chat · messages · media",
  },
  {
    title: "智能模型路由",
    eyebrow: "Routing",
    body: "按站点、账号、令牌、模型能力和失败冷却自动调度，保留真实日志与计费口径。",
    metric: "Auto",
    signal: "Routing",
    port: "site · account · token",
  },
  {
    title: "Comfy 工作流",
    eyebrow: "Workflow",
    body: "保留完整版 ComfyUI 前端习惯，接入 Cloud、RunningHub、External 或 BoosAPI 执行器。",
    metric: "Canvas",
    signal: "Studio",
    port: "cloud · rh · external",
  },
  {
    title: "创作应用生产",
    eyebrow: "Studio",
    body: "生图助手、视频助手、数字人、短视频工厂和工作空间复用同一套模型资产。",
    metric: "Media",
    signal: "Archive",
    port: "image · video · voice",
  },
];

const heroStats = [
  { value: "/v1", label: "OpenAI 兼容入口" },
  { value: "/v1/messages", label: "Claude Messages" },
  { value: "Cloud / RH", label: "Comfy API 后端" },
];

const routes = [
  { type: "GPT", model: "gpt-5.5", state: "深度推理", tone: "hot", featured: true },
  { type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime", featured: true },
  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "claude" },
  { type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
  { type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
];

const systemSignals = [
  { label: "Gateway", value: "online" },
  { label: "Workflow", value: "synced" },
  { label: "Ledger", value: "recording" },
];

const exchangeSteps = [
  { label: "API Ingress", value: "/v1/*" },
  { label: "Model Router", value: "auto" },
  { label: "Creative Apps", value: "studio" },
  { label: "Workspace", value: "archive" },
];

const consoleMetrics = [
  { label: "日志写入", value: "stream" },
  { label: "计费口径", value: "token + media" },
  { label: "失败冷却", value: "auto reroute" },
];

const studioFlow = [
  {
    step: "01",
    title: "接入模型",
    body: "把多个中转站、官方 API、Comfy Cloud、RunningHub 或外部 ComfyUI 接成统一能力池。",
  },
  {
    step: "02",
    title: "编排生产",
    body: "在对话、生图、视频、数字人和短视频工厂里复用模型、模板、提示词和工作流。",
  },
  {
    step: "03",
    title: "归档计费",
    body: "每次调用进入日志、成本、用户隔离和工作空间，只保留真正可交付的最终产出。",
  },
];

const creationPipeline = [
  {
    stage: "01",
    title: "输入创作目标",
    body: "商品文案、角色图片、参考音频、附件脚本或 API 请求进入统一入口。",
    signal: "Prompt / File",
  },
  {
    stage: "02",
    title: "路由合适模型",
    body: "按对话、生图、视频、TTS、Comfy 后端和站点健康自动选择能力。",
    signal: "Router",
  },
  {
    stage: "03",
    title: "执行工作流",
    body: "生图助手、视频助手、数字人或 Comfy 画布提交任务并持续记录进度。",
    signal: "Workflow",
  },
  {
    stage: "04",
    title: "归档最终产出",
    body: "只把生成完成的图片、视频和音频写入工作空间，同时沉淀日志与成本。",
    signal: "Workspace",
  },
];

const creationOutputs = [
  ["商品讲解视频", "digital-human", "完成"],
  ["封面主视觉", "gpt-image-2", "归档"],
  ["短视频脚本", "gpt-5.5", "可复制"],
];

const workflowModes = [
  ["cloud", "Comfy Cloud API 后端"],
  ["runninghub", "RunningHub API 后端"],
  ["external", "外部完整版 ComfyUI"],
  ["boosapi", "Rust API-native 执行器"],
];

const endpointItems = [
  {
    method: "POST",
    path: "/v1/chat/completions",
    title: "对话与 Agent",
    body: "对接 OpenAI 兼容客户端，统一进入模型路由、日志和计费。",
  },
  {
    method: "POST",
    path: "/v1/messages",
    title: "Claude Messages",
    body: "支持 Claude 格式请求、响应和流式事件转换。",
  },
  {
    method: "POST",
    path: "/v1/images/generations",
    title: "图像生成",
    body: "生图助手、工作流节点和下游 API 共享同一条模型调用链路。",
  },
  {
    method: "POST",
    path: "/workflow-ui/api/prompt",
    title: "Comfy 工作流",
    body: "代理 Cloud、RunningHub、External 或 BoosAPI 执行器，保留前端操作习惯。",
  },
];

const operations = [
  {
    eyebrow: "Identity",
    title: "管理员与普通用户隔离",
    body: "普通用户只看到自己的工作空间、任务、产出和用量；管理员可以按用户、站点和模型做运营管理。",
  },
  {
    eyebrow: "Routing",
    title: "站点、账号、密钥自动路由",
    body: "下游密钥绑定可用模型后自动建立路由，失败、冷却、重试和成本记录进入统一日志。",
  },
  {
    eyebrow: "Workspace",
    title: "只归档最终产出",
    body: "Workflow 上传素材和模板引用不会污染工作空间，图片、视频、音频等最终结果才进入资产库。",
  },
];

const consolePreviewStats = [
  ["Admin", "站点健康、RPM、TPM、失败冷却"],
  ["User", "模型广场、使用日志、工作空间"],
  ["Billing", "Token + Media 成本口径"],
];

const adminPreviewRows = [
  ["boos-gpt", "99.8%", "42ms", "online"],
  ["火山方舟", "97.4%", "231ms", "cooldown"],
  ["RunningHub", "96.9%", "384ms", "queue"],
];

const userPreviewRows = [
  ["工作流任务", "视频生成", "执行中"],
  ["生图助手", "gpt-image-2", "已归档"],
  ["数字人", "口播视频", "待确认"],
];

const productionModules = [
  "模型广场",
  "使用日志",
  "工作空间",
  "数字人",
  "短视频工厂",
  "站点公告",
  "下游密钥",
  "PostgreSQL",
];

const githubProjects = [
  {
    name: "Boos4721",
    href: "https://github.com/Boos4721",
    body: "BossAI/BoosAPI 的公开工程入口，桌面端、网关、工作流和 Provider 相关更新都会从这里沉淀。",
    meta: "GitHub profile",
  },
  {
    name: "volc-visual-sdk-rs",
    href: "https://github.com/Boos4721/volc-visual-sdk-rs",
    body: "面向火山智能视觉的 Rust 签名能力，支撑即梦图片与视频 Provider 的工程化接入。",
    meta: "Rust · Visual API",
  },
  {
    name: "ccwatch",
    href: "https://github.com/Boos4721/ccwatch",
    body: "围绕 Claude Code / Codex 的本地开发辅助工具，和 BossAI Desktop 的 Agent 工作台方向一致。",
    meta: "Agent tooling",
  },
];

const controlSignals = [
  "模型路由",
  "Claude Messages",
  "图像生成",
  "视频生成",
  "数字人口播",
  "工作空间归档",
];

const navItems = [
  ["platform", "平台能力"],
  ["studio", "生产线"],
  ["api", "API"],
  ["workflow", "工作流"],
  ["operations", "运营"],
  ["factory", "创作"],
  ["opensource", "开源"],
  ["deploy", "部署"],
] as const;

function HeroSystemStrip() {
  return (
    <div className="hero-system-strip" aria-label="BossAI 系统状态">
      {systemSignals.map((signal) => (
        <div data-motion="signal" key={signal.label}>
          <span />
          <strong>{signal.label}</strong>
          <em>{signal.value}</em>
        </div>
      ))}
    </div>
  );
}

function FlowGlyph() {
  return (
    <svg className="flow-glyph" viewBox="0 0 520 360" aria-hidden="true">
      <defs>
        <linearGradient id="lineGradient" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--acid)" />
          <stop offset="55%" stopColor="var(--blue)" />
          <stop offset="100%" stopColor="var(--flow-end)" />
        </linearGradient>
        <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <path
        className="flow-line flow-line-a"
        data-motion-line
        d="M32 110 C138 42 218 86 294 152 S414 238 496 132"
      />
      <path
        className="flow-line flow-line-b"
        data-motion-line
        d="M78 238 C170 314 248 256 314 196 S402 92 486 84"
      />
      <path
        className="flow-line flow-line-c"
        data-motion-line
        d="M92 170 C180 194 226 190 292 160 S382 150 452 236"
      />
      <g filter="url(#softGlow)">
        <circle className="flow-dot dot-a" data-motion-dot cx="32" cy="110" r="6" />
        <circle className="flow-dot dot-b" data-motion-dot cx="294" cy="152" r="8" />
        <circle className="flow-dot dot-c" data-motion-dot cx="496" cy="132" r="6" />
      </g>
      <rect className="node node-a" data-motion="node" x="96" y="44" width="120" height="56" rx="16" />
      <rect className="node node-b" data-motion="node" x="278" y="128" width="132" height="64" rx="18" />
      <rect className="node node-c" data-motion="node" x="352" y="236" width="112" height="54" rx="16" />
    </svg>
  );
}

function HeroConsole() {
  return (
    <div className="hero-console" data-motion="hero-console" aria-label="BossAI 路由状态预览">
      <div className="console-orbit" data-motion-orbit />
      <div className="console-bar">
        <span>Model Router</span>
        <strong>GPT-5.5 + Image 2 Ready</strong>
      </div>
      <div className="exchange-chain" aria-label="BossAI 模型交换链路">
        {exchangeSteps.map((step, index) => (
          <div className="exchange-step" data-motion="exchange-step" key={step.label}>
            <small>{String(index + 1).padStart(2, "0")}</small>
            <strong>{step.label}</strong>
            <span>{step.value}</span>
          </div>
        ))}
      </div>
      <div className="route-list">
        {routes.map((route) => (
          <div
            className="route-row"
            data-featured={route.featured ? "true" : undefined}
            data-motion="route-row"
            data-tone={route.tone}
            key={route.type}
          >
            <span>{route.type}</span>
            <strong>{route.model}</strong>
            <em>{route.state}</em>
          </div>
        ))}
      </div>
      <div className="console-metrics">
        {consoleMetrics.map((metric) => (
          <div data-motion="card" key={metric.label}>
            <span>{metric.label}</span>
            <strong>{metric.value}</strong>
          </div>
        ))}
      </div>
      <div className="mini-grid">
        <div>
          <span>Workspace</span>
          <strong>只归档产出</strong>
        </div>
        <div>
          <span>Billing</span>
          <strong>日志计费</strong>
        </div>
      </div>
      <FlowGlyph />
    </div>
  );
}

export default function Home() {
  return (
    <BossAiMotion>
      <main className="site-shell">
        <div className="site-noise" aria-hidden="true" />
        <header className="site-nav" data-motion="nav">
          <Link className="brand-mark" href="/" aria-label="BossAI 首页">
            <Image src="/logo.png" width={38} height={38} alt="" priority />
            <span>BossAI</span>
          </Link>
          <nav className="nav-links" aria-label="官网导航">
            {navItems.map(([id, label]) => (
              <a href={`#${id}`} key={id}>{label}</a>
            ))}
          </nav>
          <div className="nav-actions">
            <a className="ghost-link" href="https://github.com/Boos4721" target="_blank" rel="noopener noreferrer">
              GitHub
            </a>
            <Link className="ghost-link" href="/user/login">
              用户登录
            </Link>
            <Link className="solid-link" href="/boos">
              进入后台
            </Link>
          </div>
        </header>
        <nav className="mobile-nav-rail" aria-label="官网移动导航" data-motion="mobile-nav">
          {navItems.map(([id, label]) => (
            <a href={`#${id}`} key={id}>{label}</a>
          ))}
        </nav>

        <section className="hero-section">
          <div className="hero-copy" data-motion="hero-copy">
            <div className="section-kicker">
              <span className="pulse-dot" />
              多模型 · 多模态 · 工作流
            </div>
            <h1>
              多模型多模态
              <span>AI 应用生产平台</span>
            </h1>
            <p>
              BossAI 把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台，让团队用一套系统完成接入、生产、计费和交付。
            </p>
            <HeroSystemStrip />
            <div className="hero-actions">
              <Link className="primary-cta" href="/user/register">
                开始使用
              </Link>
              <Link className="secondary-cta" href="#workflow">
                查看工作流
              </Link>
              <a className="secondary-cta" href="https://github.com/Boos4721" target="_blank" rel="noopener noreferrer">
                GitHub 开源
              </a>
            </div>
            <div className="hero-proof" aria-label="BossAI 兼容能力">
              {heroStats.map((stat) => (
                <div data-motion="card" key={stat.label}>
                  <strong>{stat.value}</strong>
                  <span>{stat.label}</span>
                </div>
              ))}
            </div>
          </div>
          <HeroConsole />
        </section>

        <section id="platform" className="platform-section" data-motion="section">
          <div className="section-heading">
            <span>Platform</span>
            <h2>一套后台，接住模型接入、创作生产和商业运营</h2>
          </div>
          <div className="capability-grid">
            {platformItems.map((item, index) => (
              <article
                className="capability-card"
                data-motion="card"
                key={item.title}
                style={{ ["--index" as string]: index }}
              >
                <div className="card-top">
                  <span>{item.eyebrow}</span>
                  <strong>{item.metric}</strong>
                </div>
                <div className="card-signal" aria-hidden="true">
                  <span />
                  {item.signal}
                </div>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
                <div className="card-port">
                  <code>{item.port}</code>
                </div>
              </article>
            ))}
          </div>
        </section>

        <section id="studio" className="studio-section" data-motion="section">
          <div className="studio-copy">
            <span>Operating System</span>
            <h2>从模型供应到内容产出，形成一条能运营的生产线</h2>
            <p>
              BossAI 不只是转发请求。它把模型、用户、模板、工作流、任务队列、产出文件和成本记录串成一个可观察、可复用、可商业化的闭环。
            </p>
          </div>
          <div className="studio-flow">
            {studioFlow.map((item) => (
              <article data-motion="card" key={item.step}>
                <em>{item.step}</em>
                <strong>{item.title}</strong>
                <p>{item.body}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="pipeline-section" data-motion="section">
          <div className="pipeline-copy">
            <span>Product Flow</span>
            <h2>用户给出目标，BossAI 把它推进到可交付产出</h2>
            <p>
              官网看到的能力不是单点功能。进入后台后，用户可以把一个商品讲解、图片创意或视频脚本一路交给模型路由、工作流执行和工作空间归档。
            </p>
          </div>
          <div className="pipeline-board" aria-label="BossAI 产品流转演示">
            <div className="pipeline-request" data-motion="card">
              <span>用户输入</span>
              <strong>生成 30 秒新品讲解视频</strong>
              <p>附人物图、商品卖点、参考音频</p>
            </div>
            <div className="pipeline-steps">
              {creationPipeline.map((item) => (
                <article data-motion="card" key={item.stage}>
                  <em>{item.stage}</em>
                  <div>
                    <strong>{item.title}</strong>
                    <p>{item.body}</p>
                  </div>
                  <span>{item.signal}</span>
                </article>
              ))}
            </div>
            <div className="pipeline-output" data-motion="card">
              <div className="pipeline-output-head">
                <span>产出归档</span>
                <strong>Workspace</strong>
              </div>
              {creationOutputs.map(([name, model, state]) => (
                <div className="pipeline-output-row" key={name}>
                  <strong>{name}</strong>
                  <span>{model}</span>
                  <em>{state}</em>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="api" className="api-section" data-motion="section">
          <div className="section-heading split">
            <div>
              <span>API Surface</span>
              <h2>协议兼容不是旁路，而是整个平台的入口</h2>
            </div>
            <p>
              对话、生图、视频和 Claude Messages 都从同一个网关进入路由、日志、计费和用户隔离。前端应用、工作流节点和外部客户端使用同一套模型资产，不再各自维护一套上游。
            </p>
          </div>
          <div className="endpoint-grid">
            {endpointItems.map((endpoint) => (
              <article className="endpoint-card" data-motion="card" key={endpoint.path}>
                <div className="endpoint-line">
                  <span>{endpoint.method}</span>
                  <code>{endpoint.path}</code>
                </div>
                <h3>{endpoint.title}</h3>
                <p>{endpoint.body}</p>
              </article>
            ))}
          </div>
        </section>

        <section id="workflow" className="workflow-section" data-motion="section">
          <div className="workflow-panel">
            <div className="section-heading">
              <span>Workflow</span>
              <h2>使用完整版 ComfyUI 前端，后端按你的模式切换</h2>
            </div>
            <p>
              Workflow 保留用户熟悉的 ComfyUI 前端体验。BossAI 可以代理官方 Cloud、RunningHub、外部 ComfyUI，也能执行 API-native 节点，让模板、模型和产出都进入同一套后台。
            </p>
            <div className="mode-list">
              {workflowModes.map(([key, label]) => (
                <div data-motion="card" key={key}>
                  <code>{key}</code>
                  <span>{label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="node-board" aria-label="工作流节点预览">
            <div className="node-card wide" data-motion="card">
              <span>Prompt</span>
              <strong>文案、角色、镜头、商品信息</strong>
            </div>
            <div className="node-card" data-motion="card">
              <span>Image</span>
              <strong>生图</strong>
            </div>
            <div className="node-card" data-motion="card">
              <span>Video</span>
              <strong>视频</strong>
            </div>
            <div className="node-card" data-motion="card">
              <span>Voice</span>
              <strong>TTS</strong>
            </div>
            <div className="node-card" data-motion="card">
              <span>Archive</span>
              <strong>工作空间</strong>
            </div>
          </div>
        </section>

        <section id="operations" className="ops-section" data-motion="section">
          <div className="ops-copy">
            <span>Operations</span>
            <h2>运营后台负责成本、权限、路由和产出归档</h2>
            <p>
              管理员看站点、账号、模型、失败率和成本；普通用户看自己的模型、任务、日志和工作空间。每个角色都有清晰边界。
            </p>
          </div>
          <div className="ops-grid">
            {operations.map((item) => (
              <article className="ops-card" data-motion="card" key={item.title}>
                <span>{item.eyebrow}</span>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="console-preview-section" data-motion="section">
          <div className="console-preview-copy">
            <span>Console UX</span>
            <h2>管理员看运营风险，普通用户看下一步创作动作</h2>
            <p>
              BossAI 的后台不是一张堆满数字的表。管理员首屏回答健康、吞吐、成本和异常；用户首屏回答密钥、用量、创作入口和产出归档。
            </p>
            <div className="console-preview-stats">
              {consolePreviewStats.map(([label, value]) => (
                <div data-motion="card" key={label}>
                  <strong>{label}</strong>
                  <span>{value}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="console-preview-board" aria-label="BossAI 后台预览">
            <div className="preview-window admin-window" data-motion="card">
              <div className="preview-title">
                <span>管理员控制台</span>
                <strong>Operational</strong>
              </div>
              <div className="preview-metrics">
                <div><span>24h 请求</span><strong>128K</strong></div>
                <div><span>成功率</span><strong>99.2%</strong></div>
                <div><span>站点</span><strong>8/9</strong></div>
              </div>
              <div className="preview-list">
                {adminPreviewRows.map(([site, health, latency, state]) => (
                  <div key={site}>
                    <strong>{site}</strong>
                    <span>{health}</span>
                    <em>{latency}</em>
                    <i>{state}</i>
                  </div>
                ))}
              </div>
            </div>
            <div className="preview-window user-window" data-motion="card">
              <div className="preview-title">
                <span>用户工作台</span>
                <strong>Creation</strong>
              </div>
              <div className="preview-actions">
                <span>工作流</span>
                <span>生图</span>
                <span>数字人</span>
              </div>
              <div className="preview-list">
                {userPreviewRows.map(([name, model, state]) => (
                  <div key={name}>
                    <strong>{name}</strong>
                    <span>{model}</span>
                    <i>{state}</i>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section id="factory" className="factory-section" data-motion="section">
          <div className="factory-copy">
            <span>Creation OS</span>
            <h2>从提示词到短视频，从素材到数字人</h2>
            <p>
              生图助手、视频助手、数字人和短视频工厂共享 BossAI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
            </p>
          </div>
          <div className="module-strip">
            {productionModules.map((module) => (
              <span data-motion="card" key={module}>
                {module}
              </span>
            ))}
          </div>
        </section>

        <section className="control-section" data-motion="section">
          <div className="control-panel">
            <span>Control Plane</span>
            <h2>让每一次模型调用都能被追踪、解释和计费</h2>
          </div>
          <div className="control-grid">
            {controlSignals.map((item) => (
              <div data-motion="card" key={item}>
                <span />
                <strong>{item}</strong>
              </div>
            ))}
          </div>
        </section>

        <section id="opensource" className="opensource-section" data-motion="section">
          <div className="opensource-copy">
            <span>Open Source</span>
            <h2>官网入口、桌面端和 Provider 工程都可以从 GitHub 追踪</h2>
            <p>
              BossAI 不是孤立的展示页。Boos4721 的 GitHub 主页汇总了 Rust Provider、Agent 工具和桌面端相关工程，方便部署者查看更新、复用组件和反馈问题。
            </p>
            <div className="opensource-actions">
              <a className="primary-cta" href="https://github.com/Boos4721" target="_blank" rel="noopener noreferrer">
                访问 Boos4721
              </a>
              <a className="secondary-cta" href="https://github.com/Boos4721/volc-visual-sdk-rs" target="_blank" rel="noopener noreferrer">
                查看即梦 SDK
              </a>
            </div>
          </div>
          <div className="github-grid" aria-label="Boos4721 GitHub 项目">
            {githubProjects.map((project) => (
              <a className="github-card" data-motion="card" href={project.href} key={project.name} target="_blank" rel="noopener noreferrer">
                <span>{project.meta}</span>
                <strong>{project.name}</strong>
                <p>{project.body}</p>
              </a>
            ))}
          </div>
        </section>

        <section id="deploy" className="deploy-section" data-motion="section">
          <div>
            <span>Deploy</span>
            <h2>远程模型优先，本机不必有 GPU</h2>
            <p>
              当图像、视频、语音走上游 API、Comfy Cloud 或 RunningHub 时，BossAI 服务器只负责网关、鉴权、数据库、日志、计费和 Workflow UI 代理。
            </p>
          </div>
          <div className="deploy-stack">
            <div data-motion="card">
              <small>Backend</small>
              <strong>Rust 二进制</strong>
            </div>
            <div data-motion="card">
              <small>Database</small>
              <strong>SQLite / PostgreSQL</strong>
            </div>
            <div data-motion="card">
              <small>Website</small>
              <strong>Next.js 独立部署</strong>
            </div>
          </div>
        </section>

        <section className="final-section" data-motion="section">
          <h2>把模型、工作流和创作应用收进一个可运营的平台</h2>
          <p>适合自建 AI 中转、团队模型管理、多模态内容生产、数字人商品讲解和商业化用户面板。</p>
          <div className="hero-actions">
            <Link className="primary-cta" href="/user/register">
              开始使用
            </Link>
            <Link className="secondary-cta" href="/boos">
              进入后台
            </Link>
          </div>
        </section>
      </main>
    </BossAiMotion>
  );
}