"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { acceptInvitation } from "@/lib/supabase/employees-actions";

export default function JoinAcceptForm({ token }: { token: string }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  const handleAccept = async () => {
    setLoading(true);
    setError(null);

    try {
      // Store token for post-signup redirect
      document.cookie = `invite_token=${token};path=/;max-age=3600`;

      // Redirect to sign-up
      router.push(`/sign-up?redirect_url=${encodeURIComponent(`/join/${token}`)}`);
    } catch (e: any) {
      setError(e.message || "An error occurred");
      setLoading(false);
    }
  };

  return (
    <div>
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4">
          {error}
        </div>
      )}
      <Button
        onClick={handleAccept}
        disabled={loading}
        className="w-full bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
      >
        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
        {loading ? "Redirecting..." : "Accept invitation"}
      </Button>
      <p className="text-xs text-gray-400 mt-3">
        You&apos;ll be asked to create an account or sign in to accept.
      </p>
    </div>
  );
}