import { useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SignupForm } from "@/components/auth/SignupForm";
import { SetPasswordForm } from "@/components/auth/SetPasswordForm";
import { useSignupLogic } from "@/hooks/useSignupLogic";
import { AuthLoader } from "@/components/auth/AuthLoader";
import { AuthError } from "@/components/auth/AuthError";
import { SignupContainer } from "@/components/auth/SignupContainer";
import { EmailConfirmationNotice } from "@/components/auth/EmailConfirmationNotice";

export default function Signup() {
  const {
    isSubmitting,
    isInvitedUser,
    invitedEmail,
    invitedName,
    activeTab,
    setActiveTab,
    isVerifying,
    isVerifyingUser,
    verificationError,
    confirmationEmail,
    isResending,
    resendCooldown,
    onSignup,
    onResendConfirmation,
    onSetPassword
  } = useSignupLogic();

  useEffect(() => {
    if (invitedEmail && activeTab !== "setPassword") {
      setActiveTab("setPassword");
    }
  }, [invitedEmail, activeTab, setActiveTab]);

  if (isVerifyingUser) {
    return <AuthLoader />;
  }

  return (
    <SignupContainer
      title={confirmationEmail ? "Compte créé !" : isInvitedUser ? "Finaliser votre compte" : "Créer un compte"}
      description={confirmationEmail
        ? "Confirmez votre adresse email pour activer votre compte"
        : isInvitedUser
        ? "Définissez votre mot de passe pour accéder à votre voyage"
        : "Rejoignez TripTales pour simplifier vos voyages"}
      isInvitedUser={isInvitedUser}
      hideLoginLink={Boolean(confirmationEmail)}
    >
      {confirmationEmail ? (
        <EmailConfirmationNotice
          email={confirmationEmail}
          isResending={isResending}
          resendCooldown={resendCooldown}
          onResend={onResendConfirmation}
        />
      ) : isVerifying ? (
        <div className="flex flex-col items-center justify-center py-8">
          <AuthLoader message="Vérification de votre invitation..." subMessage="" />
        </div>
      ) : verificationError ? (
        <AuthError description={verificationError} />
      ) : (
        <Tabs
          value={activeTab}
          onValueChange={(v) => setActiveTab(v as "signup" | "setPassword")}
          className="w-full"
        >
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="signup" disabled={isInvitedUser && invitedEmail.length > 0}>
              Inscription
            </TabsTrigger>
            <TabsTrigger value="setPassword" disabled={!isInvitedUser && !invitedEmail}>
              Définir mot de passe
            </TabsTrigger>
          </TabsList>

          <TabsContent value="signup">
            <SignupForm
              onSubmit={onSignup}
              isSubmitting={isSubmitting}
              defaultEmail={invitedEmail}
              defaultName={invitedName}
              isInvitedUser={isInvitedUser}
            />
          </TabsContent>

          <TabsContent value="setPassword">
            <SetPasswordForm
              onSubmit={onSetPassword}
              isSubmitting={isSubmitting}
              invitedEmail={invitedEmail}
            />
          </TabsContent>
        </Tabs>
      )}
    </SignupContainer>
  );
}