/**
 * 首页落地页 — V21 Design System
 *
 * 5 个区域：HeroSection / FeatureSection / WorkflowSection
 *           / PricingSection / CTASection
 *
 * 零 antd 直接导入，全部使用 CSS 变量
 */
import React from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui";
import { useAuthStore } from "@/store/authStore";
import "./home-page.css";

/* ── HeroSection ─────────────────────────────────────────── */

const HeroSection: React.FC = () => {
  const navigate = useNavigate();

  return (
    <section className="hp-hero">
      <div className="hp-hero-inner">
        {/* 左侧文案 */}
        <div className="hp-hero-content">
          <span className="hp-hero-tag">🦐 小虾智剪 · AI智能视频创作平台</span>
          <h1 className="hp-hero-title">
            上传素材，AI自动剪辑
            <br />
            一键生成短视频
          </h1>
          <p className="hp-hero-desc">
            基于先进的 AI 技术，自动识别视频亮点，智能剪辑、配音、加字幕。 30
            秒内将长视频转化为适合各平台传播的精品短视频。
          </p>
          <div className="hp-hero-actions">
            <Button
              buttonType="primary"
              buttonSize="lg"
              onClick={() => navigate("/register")}
            >
              立即免费开始
            </Button>
            <Button
              buttonType="secondary"
              buttonSize="lg"
              onClick={() => navigate("/pricing")}
            >
              查看定价方案
            </Button>
          </div>
        </div>

        {/* 右侧视觉 */}
        <div className="hp-hero-visual">
          <div className="hp-hero-video">
            <div className="hp-hero-video-inner">
              <span className="hp-hero-video-placeholder">🎬</span>
            </div>
            <button
              className="hp-hero-play"
              type="button"
              aria-label="播放演示视频"
            >
              ▶
            </button>
          </div>
          <div className="hp-hero-info">
            <div className="hp-hero-badges">
              <span className="hp-hero-badge">✨ AI智能剪辑</span>
              <span className="hp-hero-badge">⚡ 30秒生成</span>
            </div>
            <span className="hp-hero-pill">可发布</span>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── FeatureSection ──────────────────────────────────────── */

const FEATURES = [
  {
    icon: "🤖",
    title: "AI 智能剪辑",
    desc: "自动识别视频高光片段，智能去除冗余内容，一键生成精彩短视频。",
  },
  {
    icon: "🎙️",
    title: "AI 配音克隆",
    desc: "克隆您的声音，支持多种音色风格，自动生成自然流畅的配音。",
  },
  {
    icon: "📝",
    title: "智能字幕标题",
    desc: "自动语音识别生成精准字幕，AI 创作吸睛标题，提升内容传播力。",
  },
  {
    icon: "📱",
    title: "多平台一键发布",
    desc: "支持抖音、快手、小红书、微信视频号等主流平台，一键同步发布。",
  },
];

const FeatureSection: React.FC = () => {
  return (
    <section className="hp-features">
      <div className="hp-section-inner">
        <h2 className="hp-section-title">核心功能</h2>
        <p className="hp-section-desc">
          从素材上传到视频发布，全流程 AI 赋能，让短视频创作更简单
        </p>
        <div className="hp-feature-grid">
          {FEATURES.map((f) => (
            <div key={f.title} className="hp-feature-card">
              <div className="hp-feature-icon">{f.icon}</div>
              <h3 className="hp-feature-title">{f.title}</h3>
              <p className="hp-feature-desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── WorkflowSection ─────────────────────────────────────── */

const STEPS = [
  { icon: "📤", title: "上传素材", desc: "拖拽或选择视频素材，支持批量上传" },
  { icon: "🧠", title: "AI 处理", desc: "AI 自动分析、剪辑、配音、加字幕" },
  { icon: "👀", title: "预览调整", desc: "在线预览生成结果，支持微调编辑" },
  { icon: "🚀", title: "一键发布", desc: "多平台同步发布，追踪数据表现" },
];

const WorkflowSection: React.FC = () => {
  return (
    <section className="hp-workflow">
      <div className="hp-section-inner">
        <h2 className="hp-section-title">工作流程</h2>
        <p className="hp-section-desc">
          四步完成短视频创作，从素材到发布仅需 30 秒
        </p>
        <div className="hp-step-grid">
          {STEPS.map((step, idx) => (
            <div key={step.title} className="hp-step-card">
              <div className="hp-step-number">{idx + 1}</div>
              <div className="hp-step-icon">{step.icon}</div>
              <h3 className="hp-step-title">{step.title}</h3>
              <p className="hp-step-desc">{step.desc}</p>
              {idx < STEPS.length - 1 && <div className="hp-step-arrow">→</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── PricingSection ──────────────────────────────────────── */

const PLANS = [
  {
    name: "基础版",
    price: "免费",
    period: "",
    desc: "适合个人体验，快速上手",
    features: [
      "每月 5 次 AI 生成",
      "720p 视频导出",
      "基础模板库",
      "1 个平台账号绑定",
    ],
    highlighted: false,
    cta: "免费开始",
  },
  {
    name: "专业版",
    price: "¥99",
    period: "/月",
    desc: "适合内容创作者，高效产出",
    features: [
      "每月 100 次 AI 生成",
      "1080p 视频导出",
      "全部模板库",
      "4 个平台账号绑定",
      "AI 配音克隆",
      "优先客服支持",
    ],
    highlighted: true,
    cta: "立即订阅",
  },
  {
    name: "企业版",
    price: "¥399",
    period: "/月",
    desc: "适合团队与企业，规模化运营",
    features: [
      "无限次 AI 生成",
      "4K 视频导出",
      "全部模板 + 定制模板",
      "无限平台账号绑定",
      "团队协作管理",
      "API 接入支持",
      "专属客户经理",
    ],
    highlighted: false,
    cta: "联系销售",
  },
];

const PricingSection: React.FC = () => {
  const navigate = useNavigate();

  return (
    <section className="hp-pricing">
      <div className="hp-section-inner">
        <h2 className="hp-section-title">定价方案</h2>
        <p className="hp-section-desc">选择适合您的方案，随时升级或取消</p>
        <div className="hp-pricing-grid">
          {PLANS.map((plan) => (
            <div
              key={plan.name}
              className={`hp-pricing-card${plan.highlighted ? " hp-pricing-card--highlight" : ""}`}
            >
              {plan.highlighted && <div className="hp-pricing-badge">推荐</div>}
              <h3 className="hp-pricing-name">{plan.name}</h3>
              <div className="hp-pricing-price">
                {plan.price}
                {plan.period && (
                  <span className="hp-pricing-period">{plan.period}</span>
                )}
              </div>
              <p className="hp-pricing-desc">{plan.desc}</p>
              <ul className="hp-pricing-features">
                {plan.features.map((f) => (
                  <li key={f}>
                    <span className="hp-pricing-check">✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <Button
                buttonType={plan.highlighted ? "primary" : "secondary"}
                onClick={() => navigate("/register")}
              >
                {plan.cta}
              </Button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── CTASection ──────────────────────────────────────────── */

const CTASection: React.FC = () => {
  const navigate = useNavigate();

  return (
    <section className="hp-cta">
      <div className="hp-cta-inner">
        <h2 className="hp-cta-title">开始用 AI 创作短视频</h2>
        <p className="hp-cta-desc">
          免费注册，立即体验 AI 智能视频创作。无需信用卡，零风险上手。
        </p>
        <Button
          buttonType="primary"
          buttonSize="lg"
          onClick={() => navigate("/register")}
        >
          免费注册
        </Button>
      </div>
    </section>
  );
};

/* ── 主页面 ─────────────────────────────────────────────── */

const HomePage: React.FC = () => {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const navigate = useNavigate();

  // 已登录用户自动跳转到 dashboard
  React.useEffect(() => {
    if (isAuthenticated) {
      navigate("/app/dashboard", { replace: true });
    }
  }, [isAuthenticated, navigate]);

  return (
    <div className="hp-page">
      {/* 顶部导航栏 */}
      <header className="hp-nav">
        <div className="hp-nav-inner">
          <button
            className="hp-nav-brand"
            type="button"
            onClick={() => navigate("/")}
          >
            <span className="hp-nav-logo">🦐</span>
            <span className="hp-nav-brand-text">小虾智剪</span>
          </button>
          <div className="hp-nav-actions">
            <Button
              buttonType="ghost"
              buttonSize="sm"
              onClick={() => navigate("/login")}
            >
              登录
            </Button>
            <Button
              buttonType="primary"
              buttonSize="sm"
              onClick={() => navigate("/register")}
            >
              免费注册
            </Button>
          </div>
        </div>
      </header>

      {/* 5 个区域 */}
      <HeroSection />
      <FeatureSection />
      <WorkflowSection />
      <PricingSection />
      <CTASection />

      {/* 底部 */}
      <footer className="hp-footer">
        <p>© 2026 小虾智剪 · AI智能视频创作平台</p>
      </footer>
    </div>
  );
};

export default HomePage;
