/**
 * 账单管理页面
 * 展示当前订阅信息 + 自动续费开关
 * P1-3: antd Switch→自定义ToggleSwitch, antd Spin→自定义Spinner
 */
import React, { useState, useEffect } from "react";
import { message } from "antd";
import { getCurrentSubscription, toggleAutoRenew } from "@/api/subscription";
import type { SubscriptionInfo } from "@/api/subscription";
import PageHead from "@/components/layout/PageHead";
import "./Billing.css";

const formatDate = (iso: string): string => {
  const d = new Date(iso);
  return d.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
};

/** 自定义 ToggleSwitch 组件 */
const ToggleSwitch: React.FC<{
  checked: boolean;
  onChange: (checked: boolean) => void;
  loading?: boolean;
  checkedChildren?: string;
  unCheckedChildren?: string;
}> = ({ checked, onChange, loading, checkedChildren, unCheckedChildren }) => (
  <button
    type="button"
    className={`xx-toggle-switch ${checked ? "checked" : ""} ${loading ? "loading" : ""}`}
    onClick={() => !loading && onChange(!checked)}
    disabled={loading}
    role="switch"
    aria-checked={checked}
  >
    <span className="xx-toggle-switch-handle">
      {loading && <span className="xx-toggle-switch-spinner" />}
    </span>
    <span className="xx-toggle-switch-inner">
      {checked ? checkedChildren : unCheckedChildren}
    </span>
  </button>
);

/** 自定义 Spinner 组件 */
const Spinner: React.FC<{ size?: "small" | "large" }> = ({
  size = "large",
}) => (
  <div className={`xx-spinner xx-spinner--${size}`}>
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
  </div>
);

const Billing: React.FC = () => {
  const [subscription, setSubscription] = useState<SubscriptionInfo | null>(
    null,
  );
  const [loading, setLoading] = useState(true);
  const [autoRenewChecked, setAutoRenewChecked] = useState(false);
  const [autoRenewLoading, setAutoRenewLoading] = useState(false);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      const data = await getCurrentSubscription();
      setSubscription(data);
      setAutoRenewChecked(data.auto_renew);
    } catch (err: unknown) {
      if (!(err as { __msgShown?: boolean })?.__msgShown)
        message.error("加载订阅数据失败");
    } finally {
      setLoading(false);
    }
  };

  const handleToggleAutoRenew = async (checked: boolean) => {
    setAutoRenewLoading(true);
    try {
      const res = await toggleAutoRenew(checked);
      message.success(res.message);
      setAutoRenewChecked(checked);
      if (subscription) {
        setSubscription({ ...subscription, auto_renew: checked });
      }
    } catch (err: unknown) {
      if (!(err as { __msgShown?: boolean })?.__msgShown)
        message.error("操作失败");
    } finally {
      setAutoRenewLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="xx-billing-page">
        <Spinner size="large" />
      </div>
    );
  }

  return (
    <div className="xx-billing-page">
      <PageHead title="账单管理" description="管理您的订阅和账单信息" />

      {subscription && (
        <>
          {/* 当前订阅概览 */}
          <div className="xx-billing-overview">
            <h2>当前订阅</h2>
            <div className="xx-overview-details">
              <div className="xx-overview-item">
                <span className="xx-label">套餐</span>
                <span className="xx-value">{subscription.plan_name}</span>
              </div>
              <div className="xx-overview-item">
                <span className="xx-label">计费周期</span>
                <span className="xx-value">
                  {subscription.billing_cycle === "monthly" ? "月付" : "年付"}
                </span>
              </div>
              <div className="xx-overview-item">
                <span className="xx-label">下次扣费</span>
                <span className="xx-value">
                  {formatDate(subscription.current_period_end)}
                </span>
              </div>
            </div>
          </div>

          {/* 自动续费 */}
          <div className="xx-billing-auto-renew">
            <h2>自动续费</h2>
            <div className="xx-auto-renew-row">
              <div className="xx-auto-renew-info">
                <p className="xx-auto-renew-title">到期自动续费</p>
                <p className="xx-auto-renew-desc">
                  开启后，将在每个计费周期结束时自动扣费续期，避免服务中断。
                </p>
              </div>
              <ToggleSwitch
                checked={autoRenewChecked}
                onChange={handleToggleAutoRenew}
                loading={autoRenewLoading}
                checkedChildren="开"
                unCheckedChildren="关"
              />
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default Billing;
export const Component = Billing;
