import type { AuthFormErrors, AuthMode } from "athena-auth-js";
import type {
  SocialProviderConfig,
  SocialProviderId,
} from "../../lib/social-auth-config";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";

type AuthSubmitFormProps = {
  mode: AuthMode;
  email: string;
  password: string;
  name: string;
  errors: AuthFormErrors;
  loading: boolean;
  resendLoading: boolean;
  socialProviders: SocialProviderConfig[];
  socialLoadingProvider: SocialProviderId | null;
  onEmailChange: (value: string) => void;
  onPasswordChange: (value: string) => void;
  onNameChange: (value: string) => void;
  onSubmit: (event: React.FormEvent) => void;
  onResendVerification: () => void;
  onSocialSignIn: (provider: SocialProviderId) => void;
};

export function AuthSubmitForm({
  mode,
  email,
  password,
  name,
  errors,
  loading,
  resendLoading,
  socialProviders,
  socialLoadingProvider,
  onEmailChange,
  onPasswordChange,
  onNameChange,
  onSubmit,
  onResendVerification,
  onSocialSignIn,
}: AuthSubmitFormProps) {
  const submitLabel =
    mode === "sign-in"
      ? "Sign in"
      : mode === "sign-up"
        ? "Create account"
        : "Request reset link";

  return (
    <form
      onSubmit={onSubmit}
      className="grid gap-4 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm"
    >
      {mode === "sign-up" ? (
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>
          <Input
            id="name"
            name="name"
            value={name}
            onChange={(e) => onNameChange(e.target.value)}
            placeholder="Floris"
          />
          {errors.name ? <p className="text-sm text-red-600">{errors.name}</p> : null}
        </div>
      ) : null}
      <div className="grid gap-2">
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          name="email"
          type="email"
          value={email}
          onChange={(e) => onEmailChange(e.target.value)}
          placeholder="you@example.com"
        />
        {errors.email ? <p className="text-sm text-red-600">{errors.email}</p> : null}
      </div>
      {mode !== "forgot-password" ? (
        <div className="grid gap-2">
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            name="password"
            type="password"
            value={password}
            onChange={(e) => onPasswordChange(e.target.value)}
            placeholder="At least 8 characters"
          />
          {errors.password ? (
            <p className="text-sm text-red-600">{errors.password}</p>
          ) : null}
        </div>
      ) : null}
      <div className="flex flex-wrap gap-2">
        <Button type="submit" disabled={loading || Boolean(socialLoadingProvider)}>
          {loading ? "Submitting..." : submitLabel}
        </Button>
        {mode !== "forgot-password" ? (
          <Button
            type="button"
            variant="secondary"
            disabled={resendLoading || !email || Boolean(socialLoadingProvider)}
            onClick={onResendVerification}
          >
            {resendLoading ? "Resending..." : "Resend verify email"}
          </Button>
        ) : null}
      </div>
      {mode !== "forgot-password" && socialProviders.length > 0 ? (
        <div className="grid gap-2">
          <div className="text-xs uppercase tracking-wide text-slate-500">Or continue with</div>
          <div className="flex flex-wrap gap-2">
            {socialProviders.map((provider) => (
              <Button
                key={provider.provider}
                type="button"
                variant="outline"
                disabled={Boolean(socialLoadingProvider) || loading || resendLoading}
                onClick={() => onSocialSignIn(provider.provider)}
              >
                {socialLoadingProvider === provider.provider
                  ? `Opening ${provider.label}...`
                  : `Continue with ${provider.label}`}
              </Button>
            ))}
          </div>
        </div>
      ) : null}
    </form>
  );
}
