import { redirect } from "next/navigation";
import { auth } from "@clerk/nextjs/server";
import { fetchInvitationByToken, processInvitationToken } from "@/lib/supabase/employees-actions";
import JoinAcceptForm from "./JoinAcceptForm";

export default async function JoinPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;
  const { userId } = await auth();

  const invitation = await fetchInvitationByToken(token);

  if (!invitation) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="w-full max-w-md bg-white rounded-xl border border-gray-200 p-8 text-center">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-2xl">✕</span>
          </div>
          <h1 className="text-xl font-semibold text-gray-900 mb-2">Invalid or Expired Invitation</h1>
          <p className="text-sm text-gray-500">
            This invitation link is no longer valid. Please contact your organisation administrator for a new invitation.
          </p>
        </div>
      </div>
    );
  }

  // Already signed in — accept directly
  if (userId) {
    const result = await processInvitationToken(token);
    if (result.success && result.redirectUrl) {
      redirect(result.redirectUrl);
    }
    // If accept failed, show error
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="w-full max-w-md bg-white rounded-xl border border-gray-200 p-8 text-center">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-2xl">✕</span>
          </div>
          <h1 className="text-xl font-semibold text-gray-900 mb-2">
            {result.error || "Could not accept invitation"}
          </h1>
          <a href="/dashboard" className="text-sm text-[#1D9E75] hover:underline">
            Go to Dashboard
          </a>
        </div>
      </div>
    );
  }

  // Not signed in — show accept form
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-white rounded-xl border border-gray-200 p-8 text-center">
        <div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <span className="text-2xl">👋</span>
        </div>
        <h1 className="text-xl font-semibold text-gray-900 mb-2">
          You&apos;re invited!
        </h1>
        <p className="text-sm text-gray-500 mb-6">
          <strong className="text-gray-700">{invitation.orgName}</strong> has invited{" "}
          <strong className="text-gray-700">{invitation.email}</strong> to join their team on Vela.
        </p>
        <JoinAcceptForm token={token} />
      </div>
    </div>
  );
}