/** sim 模式的 Cloudflare 授权模拟页:确认后调用 approve,再跳回节点页 */
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button, Card, Space, App } from "antd";
import { oauthSimApprove } from "../api.ts";

/** # 函数
 * 模拟授权页(仅本地 sim 模式;真实部署直接跳 Cloudflare 授权页)
 */
export function OAuthSimPage() {
  const [params] = useSearchParams();
  const navigate = useNavigate();
  const { message } = App.useApp();
  const state = params.get("state") ?? "";
  const [busy, setBusy] = useState(false);

  const approve = async () => {
    setBusy(true);
    try {
      const res = await oauthSimApprove(state);
      if (res.ok) {
        message.success("Cloudflare 授权与自动安装完成");
        navigate(`/accounts?provision=${encodeURIComponent(res.account_id)}`, { replace: true });
      } else {
        message.error(res.error ?? "安装失败");
        navigate("/accounts", { replace: true });
      }
    } catch (err) {
      message.error(err instanceof Error ? err.message : "授权失败");
      navigate("/accounts", { replace: true });
    } finally {
      setBusy(false);
    }
  };

  // state 缺失直接回节点页
  useEffect(() => {
    if (!state) navigate("/accounts", { replace: true });
  }, [state, navigate]);

  return (
    <div className="login-page">
      <Card className="login-card" title="Cloudflare 授权(本地模拟)" styles={{ header: { textAlign: "center" } }}>
        <p>sim 模式下,该页面模拟 Cloudflare OAuth 授权同意流程。</p>
        <p className="muted">真实部署时,这里会跳转到 dash.cloudflare.com 的授权页面。</p>
        <Space style={{ width: "100%", justifyContent: "center", marginTop: 16 }}>
          <Button onClick={() => navigate("/accounts")}>拒绝</Button>
          <Button type="primary" loading={busy} onClick={() => void approve()}>
            同意授权
          </Button>
        </Space>
      </Card>
    </div>
  );
}