/**
 * 定价页面 - V21 UI 四级定价
 */
import React, { useState } from "react";
import { message } from "antd";
import PageHead from "@/components/layout/PageHead";
import "./Plans.css";

const PLANS = [
  {
    id: "free",
    name: "体验版",
    price: 0,
    description: "适合个人体验",
    recommended: false,
    features: ["3个视频成片", "基础标题模板", "基础配音音色", "720p导出"],
  },
  {
    id: "standard",
    name: "标准版",
    price: 99,
    description: "适合内容创作者",
    recommended: false,
    features: [
      "无限视频成片",
      "高级标题模板",
      "全部配音音色",
      "1080p导出",
      "API接口",
    ],
  },
  {
    id: "pro",
    name: "专业版",
    price: 299,
    description: "适合专业团队",
    recommended: true,
    features: [
      "无限视频成片",
      "自定义标题",
      "全部配音音色",
      "4K导出",
      "优先渲染队列",
      "专属客服",
    ],
  },
  {
    id: "enterprise",
    name: "企业版",
    price: null,
    description: "适合企业用户",
    recommended: false,
    features: [
      "私有化部署",
      "自定义品牌形象",
      " SLA服务保障",
      "技术支持",
      "团队协作",
      "数据报表",
    ],
  },
];

const Plans: React.FC = () => {
  const [subscribing, setSubscribing] = useState(false);

  const handleSubscribe = async (_planId: string) => {
    try {
      setSubscribing(true);
      message.success("订阅成功");
    } catch (error: unknown) {
      message.error("订阅失败");
    } finally {
      setSubscribing(false);
    }
  };

  return (
    <div className="xx-plans-page">
      <PageHead
        title="选择适合您的方案"
        description="灵活定价，满足不同规模的创作需求"
      />

      <div className="xx-plans-grid">
        {PLANS.map((plan) => (
          <div
            key={plan.id}
            className={`xx-plan-card ${plan.recommended ? "featured" : ""}`}
          >
            {plan.recommended && <div className="xx-badge">推荐</div>}
            {plan.id === "enterprise" && (
              <div className="xx-badge enterprise">定制</div>
            )}

            <h3>{plan.name}</h3>

            <div
              className={`xx-plan-price ${plan.price === null ? "custom" : ""}`}
            >
              {plan.price !== null ? (
                <>
                  <span className="currency">¥</span>
                  <span className="amount">{plan.price}</span>
                  <span className="period">/月</span>
                </>
              ) : (
                <span className="amount">联系我们</span>
              )}
            </div>

            <p className="xx-plan-description">{plan.description}</p>

            <div className="xx-features">
              {plan.features.map((feature, idx) => (
                <div key={idx} className="xx-feature">
                  <span>✓</span>
                  <span>{feature}</span>
                </div>
              ))}
            </div>

            <button
              className={`xx-subscribe-btn ${
                plan.id === "enterprise"
                  ? "enterprise"
                  : plan.recommended
                    ? "primary"
                    : "ghost"
              }`}
              onClick={() => handleSubscribe(plan.id)}
              disabled={subscribing}
            >
              {subscribing
                ? "处理中..."
                : plan.price === null
                  ? "联系我们"
                  : "立即订阅"}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Plans;
export const Component = Plans;
