"use client";

import { Eye, EyeOff, KeyRound, Loader2, Lock, User } from "lucide-react";
import { useState } from "react";
import type { TFunction } from "i18next";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

type PlayerLoginFormProps = {
  variant: "mobile" | "desktop";
  t: TFunction<"entry">;
  username: string;
  password: string;
  captchaCode: string;
  captchaSrc: string | null;
  loading: boolean;
  loadingCaptcha: boolean;
  onUsernameChange: (value: string) => void;
  onPasswordChange: (value: string) => void;
  onCaptchaCodeChange: (value: string) => void;
  onRefreshCaptcha: () => void;
  onSubmit: (event: React.FormEvent) => void;
};

export function PlayerLoginForm({
  variant,
  t,
  username,
  password,
  captchaCode,
  captchaSrc,
  loading,
  loadingCaptcha,
  onUsernameChange,
  onPasswordChange,
  onCaptchaCodeChange,
  onRefreshCaptcha,
  onSubmit,
}: PlayerLoginFormProps) {
  const [showPassword, setShowPassword] = useState(false);
  const isDesktop = variant === "desktop";

  const inputClass =
    "h-10 rounded-xl border-gray-200 bg-white text-base shadow-none";
  const captchaButtonClass = cn(
    "flex h-10 min-w-[8.5rem] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-[#f4fbf6] transition-colors hover:bg-[#eaf7ee] disabled:pointer-events-none disabled:opacity-50",
  );

  return (
    <form
      className={cn("space-y-5", isDesktop ? "mt-5 xl:mt-8" : "mt-6")}
      onSubmit={onSubmit}
    >
      <div className="space-y-1.5">
        <Label htmlFor="login-user" className="text-gray-700">
          {t("login.username")}
        </Label>
        <div className="relative">
          <User
            className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
            aria-hidden
          />
          <Input
            id="login-user"
            value={username}
            onChange={(e) => onUsernameChange(e.target.value)}
            autoComplete="username"
            disabled={loading}
            placeholder={t("login.usernamePlaceholder")}
            className={cn(inputClass, "pl-10")}
          />
        </div>
      </div>

      <div className="space-y-1.5">
        <Label htmlFor="login-pass" className="text-gray-700">
          {t("login.password")}
        </Label>
        <div className="relative">
          <Lock
            className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
            aria-hidden
          />
          <Input
            id="login-pass"
            type={showPassword ? "text" : "password"}
            value={password}
            onChange={(e) => onPasswordChange(e.target.value)}
            autoComplete="current-password"
            disabled={loading}
            placeholder={t("login.passwordPlaceholder")}
            className={cn(inputClass, "pr-10 pl-10")}
          />
          <button
            type="button"
            className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-600"
            onClick={() => setShowPassword((prev) => !prev)}
            aria-label={showPassword ? t("login.hidePassword") : t("login.showPassword")}
          >
            {showPassword ? (
              <EyeOff className="size-4" aria-hidden />
            ) : (
              <Eye className="size-4" aria-hidden />
            )}
          </button>
        </div>
      </div>

      <div className="space-y-1.5">
        <Label htmlFor="login-captcha" className="text-gray-700">
          {t("login.captcha")}
        </Label>
        <div className="flex items-stretch gap-3">
          <div className="relative min-w-0 flex-1">
            <KeyRound
              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
              aria-hidden
            />
            <Input
              id="login-captcha"
              name="captcha"
              autoComplete="off"
              value={captchaCode}
              onChange={(e) => onCaptchaCodeChange(e.target.value)}
              placeholder={t("login.captchaPlaceholder")}
              maxLength={32}
              disabled={loading}
              className={cn(inputClass, "pl-10")}
            />
          </div>
          <button
            type="button"
            className={captchaButtonClass}
            onClick={onRefreshCaptcha}
            disabled={loadingCaptcha || loading}
            aria-label={loadingCaptcha ? t("login.captchaLoading") : t("login.captchaRefresh")}
          >
            {captchaSrc ? (
              // eslint-disable-next-line @next/next/no-img-element -- captcha SVG data URL from API
              <img
                src={captchaSrc}
                alt=""
                className="pointer-events-none block h-full w-auto max-w-full object-contain"
              />
            ) : (
              <span className="px-1 text-xs text-muted-foreground">
                {loadingCaptcha ? t("login.captchaLoading") : t("login.captchaFetch")}
              </span>
            )}
          </button>
        </div>
      </div>

      <Button
        type="submit"
        className="mt-1 h-11 w-full rounded-xl bg-red-600 text-base font-medium hover:bg-red-700"
        disabled={loading}
      >
        {loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
        {t("login.submit")}
      </Button>
    </form>
  );
}