import { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useAuth } from "../App";
import { Check, Logo, Spinner } from "../components/icons";
import { Button, InlineAlert } from "../components/ui";
import { ApiError, api, session } from "../lib/client";
import type { Workspace } from "../lib/types";

/** 邀请链接落地页：/join/:wsId/:code。未登录先去登录，登录后再回来。 */
export function JoinPage() {
  const { wsId, code } = useParams<{ wsId: string; code: string }>();
  const { user, loading, reload } = useAuth();
  const navigate = useNavigate();
  const [message, setMessage] = useState("正在加入工作区…");
  const [done, setDone] = useState(false);
  const [failed, setFailed] = useState(false);
  const started = useRef(false);

  useEffect(() => {
    if (loading) return;
    if (!session.access) {
      navigate(`/login?next=${encodeURIComponent(`/join/${wsId}/${code}`)}`, { replace: true });
      return;
    }
    if (!user || started.current || !wsId || !code) return;
    started.current = true;

    void (async () => {
      try {
        const ws = await api.post<Workspace>(`/workspaces/${wsId}/join`, { code });
        await reload();
        setDone(true);
        setMessage(`已加入「${ws.name}」，正在跳转…`);
        window.setTimeout(() => navigate(`/w/${wsId}`, { replace: true }), 700);
      } catch (err) {
        setFailed(true);
        setMessage(err instanceof ApiError ? err.message : "加入失败");
      }
    })();
  }, [loading, user, wsId, code, navigate, reload]);

  return (
    <main className="grid min-h-full place-items-center bg-paper-100 px-6">
      <div className="w-full max-w-sm animate-slide-up">
        <div className="mb-6 flex justify-center">
          <Logo size={40} />
        </div>
        <div className="card p-7 text-center">
          <div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-2xl bg-primary-50 text-primary-700">
            {failed ? (
              <span className="text-xl">!</span>
            ) : done ? (
              <Check size={22} />
            ) : (
              <Spinner size={20} />
            )}
          </div>
          <p className="text-sm leading-relaxed text-ink-700">{message}</p>
          <p className="mt-1 text-2xs text-ink-400">
            {failed ? "链接可能已失效，或你已经加入过了。" : "邀请码一次有效"}
          </p>
          {failed && (
            <>
              <div className="mt-4">
                <InlineAlert>可以把邀请码发给同事，让他重新生成一条链接。</InlineAlert>
              </div>
              <Button variant="ghost" className="mt-4 w-full" onClick={() => navigate("/")}>
                返回工作区列表
              </Button>
            </>
          )}
        </div>
      </div>
    </main>
  );
}