"use client";

import { useId, useState, type FormEvent } from "react";
import { usePathname } from "next/navigation";
import { CheckCircle2, Eye, EyeOff, Loader2, Lock } from "lucide-react";
import { toast } from "sonner";
import { ApiException } from "@/lib/api/client";
import { useAuth } from "@/lib/auth/AuthContext";
import type { LoginRequiredBlock } from "@/lib/chat/types";
import { useChatBlocks } from "../ChatBlockContext";
import { BlockCard, ChatLink, inputClass, labelClass, primaryButtonClass } from "./shared";

/**
 * Inline sign-in. On success AuthContext's user changes, `useChat` starts a
 * fresh session for that user and replays `resume_action` — this card only
 * queues the action and performs the login.
 */
export default function LoginCard({ block }: { block: LoginRequiredBlock }) {
  const { copy, prepareResume, cancelResume } = useChatBlocks();
  const { login } = useAuth();
  const pathname = usePathname();
  const id = useId();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const resume = block.resume_action && typeof block.resume_action.type === "string" ? block.resume_action : null;
  const registerHref = `/login?tab=register&redirect=${encodeURIComponent(pathname || "/")}`;
  const errorId = `${id}-error`;

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (submitting) return;
    if (!email.trim() || !password) {
      setError(copy.loginMissing);
      return;
    }

    setError(null);
    setSubmitting(true);
    prepareResume(resume);
    try {
      await login(email.trim(), password);
      setDone(true);
      toast.success(copy.loginSuccess);
    } catch (err) {
      cancelResume();
      if (err instanceof ApiException) {
        const first = err.errors ? Object.values(err.errors).find((m) => m?.length)?.[0] : undefined;
        setError(first || err.message || copy.loginFailed);
      } else {
        setError(copy.loginFailed);
      }
      setSubmitting(false);
    }
  }

  if (done) {
    return (
      <BlockCard>
        <p className="flex items-center gap-1.5 font-semibold text-emerald-700">
          <CheckCircle2 size={14} aria-hidden /> {copy.loginSuccess}
        </p>
      </BlockCard>
    );
  }

  return (
    <BlockCard className="space-y-2.5">
      <p className="flex items-start gap-1.5 whitespace-pre-line font-medium text-gray-800">
        <Lock size={13} className="mt-0.5 shrink-0 text-[#CC1414]" aria-hidden />
        {block.text}
      </p>

      <form onSubmit={onSubmit} noValidate className="space-y-2" aria-describedby={error ? errorId : undefined}>
        <div>
          <label htmlFor={`${id}-email`} className={labelClass}>
            {copy.loginEmail}
          </label>
          <input
            id={`${id}-email`}
            type="email"
            autoComplete="email"
            inputMode="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={submitting}
            placeholder="you@example.com"
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor={`${id}-password`} className={labelClass}>
            {copy.loginPassword}
          </label>
          <div className="relative">
            <input
              id={`${id}-password`}
              type={showPassword ? "text" : "password"}
              autoComplete="current-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={submitting}
              className={`${inputClass} pr-10`}
            />
            <button
              type="button"
              onClick={() => setShowPassword((v) => !v)}
              aria-label={showPassword ? copy.hidePassword : copy.showPassword}
              className="absolute right-0.5 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center text-gray-400 hover:text-gray-600"
            >
              {showPassword ? <EyeOff size={14} aria-hidden /> : <Eye size={14} aria-hidden />}
            </button>
          </div>
        </div>

        {error ? (
          <p id={errorId} role="alert" className="rounded-md bg-red-50 px-2 py-1.5 text-[11px] text-red-700">
            {error}
          </p>
        ) : null}

        <button type="submit" disabled={submitting} className={`${primaryButtonClass} w-full`}>
          {submitting ? (
            <>
              <Loader2 size={13} className="animate-spin" aria-hidden /> {copy.loginLoading}
            </>
          ) : (
            copy.loginSubmit
          )}
        </button>
      </form>

      <div className="flex flex-wrap items-center justify-between gap-2 text-[11px]">
        <ChatLink href={registerHref}>{copy.createAccount}</ChatLink>
        <ChatLink href="/forgot-password" className="text-gray-500">
          {copy.forgotPassword}
        </ChatLink>
      </div>
    </BlockCard>
  );
}