'use client';

import { useState } from 'react';
import { Clock, RefreshCw } from 'lucide-react';
import { useAuthStore } from '@/stores/auth-store';
import { refreshToken as apiRefresh } from '@/lib/auth-api';

/**
 * 嵌入态(宿主 iframe)会话失效兜底 —— 替代 dev 的 MockLoginDialog。
 *
 * 嵌入时 PAC 的 code/token 都由宿主换票签发;access + refresh 都失效后 PAC **无法自助续期**
 * (换票只能宿主发起),只能引导用户回宿主重新进入。给一个「重试」兜底暂时性刷新失败:
 * 若 localStorage 里 refresh token 还在(偶发网络抖动导致的失败),重试即恢复,不必真回宿主。
 */
export function SessionExpired() {
  const [retrying, setRetrying] = useState(false);
  const [failed, setFailed] = useState(false);

  const retry = async () => {
    if (retrying) return;
    setRetrying(true);
    setFailed(false);
    const rt = useAuthStore.getState().refreshToken;
    // 有 refresh token → 试着静默续期(挡暂时性失败);没有就只能回宿主,直接标记失败。
    if (rt) {
      try {
        const r = await apiRefresh(rt);
        useAuthStore.getState().setTokens(r);
        return; // 成功:store 更新 → AuthGate 自动放行,本组件卸载
      } catch {
        /* fall through */
      }
    }
    setRetrying(false);
    setFailed(true);
  };

  return (
    <div className="flex h-screen flex-col items-center justify-center gap-3 p-8 text-center">
      <span className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-50 text-amber-500">
        <Clock className="h-7 w-7" />
      </span>
      <p className="text-[15px] font-medium text-slate-700">登录已过期</p>
      <p className="max-w-sm text-[12.5px] leading-relaxed text-slate-500">
        你在宿主系统里的登录会话已失效。请回到宿主系统重新进入召回工作台;
        若只是短暂网络问题,可先点下方重试。
      </p>
      <button
        type="button"
        onClick={retry}
        disabled={retrying}
        className="inline-flex items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[12.5px] text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-50"
      >
        <RefreshCw className={`h-3.5 w-3.5 ${retrying ? 'animate-spin' : ''}`} />
        {retrying ? '重试中…' : '重试'}
      </button>
      {failed && (
        <p className="text-[11.5px] text-rose-500">仍未恢复,请从宿主系统重新打开本页面。</p>
      )}
    </div>
  );
}
