"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { MailCheck } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Field, Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";
import { AuthCard, FormError, FormNotice } from "./auth-card";
import { PasswordInput } from "./password-input";
import { ResendVerification, RESEND_COOLDOWN_S } from "./resend-verification";
import { humanAuthError, isValidEmail, type AuthClientError } from "./auth-errors";

export function LoginForm({ next, notice }: { next: string; notice?: "reset" | "verified" | "signed-out" }) {
  const router = useRouter();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = React.useState<{ email?: string; password?: string }>({});
  const [unverified, setUnverified] = React.useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setUnverified(false);
    const fe: typeof fieldErrors = {};
    if (!isValidEmail(email)) fe.email = "Enter a valid email address.";
    if (!password) fe.password = "Enter your password.";
    setFieldErrors(fe);
    if (Object.keys(fe).length) return;

    setLoading(true);
    try {
      const { error: err } = await authClient.signIn.email({ email: email.trim(), password, callbackURL: "/verify-email" });
      if (err) {
        const ae = err as AuthClientError;
        if (ae.status === 403 || ae.code === "EMAIL_NOT_VERIFIED") {
          setUnverified(true);
          return;
        }
        setError(humanAuthError(ae, "login"));
        return;
      }
      toast.success("Welcome back");
      router.push(next);
      router.refresh();
    } catch {
      setError("We couldn't reach the server. Check your connection and try again.");
    } finally {
      setLoading(false);
    }
  }

  if (unverified) {
    return (
      <AuthCard
        icon={<MailCheck />}
        title="Verify your email first"
        description={
          <>
            Your account exists but <span className="font-medium text-fg">{email.trim()}</span> hasn&apos;t been verified yet. We just sent you a fresh link — open it to finish signing in.
          </>
        }
        footer={
          <button type="button" className="text-accent underline-offset-4 hover:underline" onClick={() => setUnverified(false)}>
            Back to sign in
          </button>
        }
      >
        <div className="space-y-3">
          <ResendVerification email={email.trim()} initialCooldown={RESEND_COOLDOWN_S} className="w-full" />
          <p className="text-center text-xs text-fg-subtle">Check your spam folder if nothing arrives within a minute.</p>
        </div>
      </AuthCard>
    );
  }

  return (
    <AuthCard
      title="Sign in"
      description="Welcome back. Your keys and conversations are where you left them."
      footer={
        <>
          New to PolyLLM?{" "}
          <Link href="/signup" className="font-medium text-accent underline-offset-4 hover:underline">
            Create an account
          </Link>
        </>
      }
    >
      <form onSubmit={onSubmit} noValidate className="space-y-4">
        {notice === "reset" ? <FormNotice tone="success">Your password was updated. Sign in with the new one.</FormNotice> : null}
        {notice === "verified" ? <FormNotice tone="success">Email verified. You can sign in now.</FormNotice> : null}
        {notice === "signed-out" ? <FormNotice>You have been signed out.</FormNotice> : null}
        <FormError id="login-error">{error}</FormError>
        <Field label="Email" htmlFor="login-email" error={fieldErrors.email}>
          <Input
            id="login-email"
            name="email"
            type="email"
            inputMode="email"
            autoComplete="email"
            autoCapitalize="none"
            spellCheck={false}
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@company.com"
            aria-invalid={!!fieldErrors.email || undefined}
            aria-describedby={error ? "login-error" : undefined}
            autoFocus
          />
        </Field>
        <Field label="Password" htmlFor="login-password" error={fieldErrors.password}>
          <PasswordInput id="login-password" name="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Your password" invalid={!!fieldErrors.password} />
          <div className="flex justify-end">
            <Link href={email ? `/forgot-password?email=${encodeURIComponent(email)}` : "/forgot-password"} className="text-xs text-fg-muted underline-offset-4 hover:text-fg hover:underline">
              Forgot your password?
            </Link>
          </div>
        </Field>
        <Button type="submit" size="lg" className="mt-2 w-full" loading={loading}>
          Sign in
        </Button>
      </form>
    </AuthCard>
  );
}