"use client";

import type { TFunction } from "i18next";
import Image from "next/image";

import { LanguageSwitcher } from "@/components/language-switcher";
import { PlayerLoginForm } from "@/features/player/player-login-form";

type PlayerLoginDesktopProps = {
  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;
};

/** PC 端登录：左右分栏卡片，小屏桌面下收紧高度与留白。 */
export function PlayerLoginDesktop({
  t,
  username,
  password,
  captchaCode,
  captchaSrc,
  loading,
  loadingCaptcha,
  onUsernameChange,
  onPasswordChange,
  onCaptchaCodeChange,
  onRefreshCaptcha,
  onSubmit,
}: PlayerLoginDesktopProps) {
  return (
    <div
      className="relative hidden min-h-0 flex-1 overflow-y-auto lg:flex lg:items-center lg:justify-center lg:px-4 lg:py-4 xl:px-8 xl:py-10"
      data-login-desktop-root
    >
      <div className="pointer-events-none absolute inset-0" aria-hidden>
        <Image
          src="/entry/login-pc-bg.png"
          alt=""
          fill
          sizes="100vw"
          className="object-cover object-center"
          priority
        />
      </div>

      <div
        className="relative z-10 flex min-h-[min(560px,calc(100dvh-2rem))] w-full max-w-[960px] overflow-hidden rounded-[1.5rem] bg-white shadow-[0_24px_80px_rgba(15,23,42,0.12)] xl:min-h-[min(640px,88vh)] xl:max-w-[1080px] xl:rounded-[2rem]"
        data-login-desktop-card
      >
        <div
          className="relative w-[min(48%,400px)] shrink-0 self-stretch overflow-hidden bg-[#f8fafc] xl:w-[min(50%,460px)]"
          data-login-hero-slot
        >
          <Image
            src="/entry/login-pc-hero.png"
            alt=""
            fill
            sizes="(max-width: 1280px) 400px, 460px"
            className="object-cover object-center"
            priority
          />
        </div>

        <div className="flex min-w-0 flex-1 flex-col px-6 py-5 xl:px-10 xl:py-10">
          <div className="flex justify-end">
            <LanguageSwitcher
              variant="pill"
              menuAlign="end"
              showFlag={false}
              useFullLabel
            />
          </div>

          <div className="mx-auto flex w-full max-w-[23rem] flex-1 flex-col justify-center xl:max-w-[24rem]">
            <PlayerLoginForm
              variant="desktop"
              t={t}
              username={username}
              password={password}
              captchaCode={captchaCode}
              captchaSrc={captchaSrc}
              loading={loading}
              loadingCaptcha={loadingCaptcha}
              onUsernameChange={onUsernameChange}
              onPasswordChange={onPasswordChange}
              onCaptchaCodeChange={onCaptchaCodeChange}
              onRefreshCaptcha={onRefreshCaptcha}
              onSubmit={onSubmit}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
