/**
 * Team invite join page — /teams/join/:inviteCode
 * Flow: Chưa login → redirect login → quay lại → hiện Accept → join → vào workspace
 */

import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useAuth } from "@clerk/clerk-react";
import { Button } from "@/components/ui/button";
import { joinTeam } from "@/service/teamService";

const TeamJoin = () => {
    const { inviteCode } = useParams<{ inviteCode: string }>();
    const navigate = useNavigate();
    const { isSignedIn, isLoaded } = useAuth();

    const [joining, setJoining] = useState(false);
    const [error, setError] = useState("");

    // Chờ Clerk load xong
    if (!isLoaded) {
        return (
            <div className="flex items-center justify-center min-h-[60vh]">
                <div className="animate-spin w-5 h-5 border-2 border-primary border-t-transparent rounded-full" />
            </div>
        );
    }

    // Chưa login → redirect đến trang auth, lưu URL hiện tại để quay lại
    if (!isSignedIn) {
        const currentUrl = window.location.pathname;
        return (
            <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
                <div className="text-center space-y-2">
                    <h2 className="text-lg font-semibold">Bạn được mời vào team</h2>
                    <p className="text-sm text-muted-foreground">Đăng nhập để tham gia</p>
                </div>
                <Button onClick={() => navigate(`/auth?redirect=${encodeURIComponent(currentUrl)}`)}>
                    Đăng nhập
                </Button>
            </div>
        );
    }

    const handleAccept = async () => {
        if (!inviteCode) return;
        setJoining(true);
        setError("");
        try {
            const team = await joinTeam(inviteCode);
            navigate(`/app/teams/${team.id}`, { replace: true });
        } catch (e: any) {
            setError(e.message || "Không thể join team. Code không hợp lệ hoặc đã hết hạn.");
            setJoining(false);
        }
    };

    return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] gap-6">
            <div className="text-center space-y-2">
                <h2 className="text-lg font-semibold">Bạn được mời vào team</h2>
                <p className="text-sm text-muted-foreground">
                    Invite code: <span className="font-mono">{inviteCode}</span>
                </p>
            </div>

            {error && <p className="text-sm text-red-500">{error}</p>}

            <div className="flex gap-3">
                <Button variant="outline" onClick={() => navigate("/app/teams")}>
                    Hủy
                </Button>
                <Button onClick={handleAccept} disabled={joining}>
                    {joining ? "Đang tham gia..." : "Tham gia team"}
                </Button>
            </div>
        </div>
    );
};

export default TeamJoin;
