"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { apiFetch } from "@/lib/api-client";
import { getSupabaseBrowser } from "@/lib/supabase-browser";

export default function JoinPage() {
  const params = useParams<{ token: string }>();
  const router = useRouter();
  const [status, setStatus] = useState("Đang kiểm tra lời mời…");
  const [needsLogin, setNeedsLogin] = useState(false);

  useEffect(() => {
    async function join() {
      const { data } = await getSupabaseBrowser().auth.getSession();
      if (!data.session) {
        setNeedsLogin(true);
        setStatus("Bạn cần đăng nhập trước khi tham gia nhóm.");
        return;
      }
      try {
        const result = await apiFetch<{ teamId: string; teamName: string }>(`/api/invites/${params.token}/accept`, { method: "POST" });
        setStatus(`Đã tham gia nhóm “${result.teamName}”. Đang chuyển hướng…`);
        setTimeout(() => router.replace(`/dashboard?team=${result.teamId}`), 800);
      } catch (error) {
        setStatus(error instanceof Error ? error.message : "Không thể tham gia nhóm.");
      }
    }
    join();
  }, [params.token, router]);

  return <main className="centerPage"><section className="statusCard"><div className="statusIcon">👥</div><h1>Lời mời GroupVault</h1><p>{status}</p>{needsLogin && <Link className="button primary" href={`/login?next=/join/${params.token}`}>Đăng nhập để tiếp tục</Link>}</section></main>;
}