"use client";

import type { TFunction } from "i18next";
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle2,
  Globe,
  Loader2,
  RefreshCw,
  ShieldCheck,
} from "lucide-react";
import Image from "next/image";
import { useTranslation } from "react-i18next";

import { LanguageSwitcher } from "@/components/language-switcher";
import { Button, buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type DesktopEntryStepStatus = "pending" | "in-progress" | "done" | "error";

type DesktopEntryStep = {
  id: "token" | "account" | "hall";
  status: DesktopEntryStepStatus;
};

type DesktopFailureRow = {
  code?: string;
  detailKey?: string;
  fallbackMessage?: string;
};

type PlayerEntryDesktopProps = {
  phase: "loading" | "success" | "failed";
  waitingForToken: boolean;
  progress: number;
  steps: DesktopEntryStep[];
  failureDetails: DesktopFailureRow[];
  t: TFunction<"entry">;
  tc: TFunction<"common">;
  mainSiteUrl: string;
  onRetry: () => void;
};

/** PC Token 入场校验，视觉与账号密码登录保持一致。 */
export function PlayerEntryDesktop({
  phase,
  waitingForToken,
  progress,
  steps,
  failureDetails,
  t,
  tc,
  mainSiteUrl,
  onRetry,
}: PlayerEntryDesktopProps) {
  const isLoading = phase === "loading" || waitingForToken;

  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">
      <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]">
        <div className="relative w-[min(48%,400px)] shrink-0 self-stretch overflow-hidden bg-[#f8fafc] xl:w-[min(50%,460px)]">
          <Image
            src="/entry/login-pc-hero.png"
            alt={t("header.backgroundAlt")}
            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-[25rem] flex-1 flex-col justify-center">
            {isLoading ? (
              <EntryProgress progress={progress} steps={steps} t={t} />
            ) : null}
            {phase === "failed" ? (
              <EntryFailure
                details={failureDetails}
                mainSiteUrl={mainSiteUrl}
                onRetry={onRetry}
                t={t}
                tc={tc}
              />
            ) : null}
          </div>

          <div className="flex items-center justify-center gap-2 text-xs font-medium text-slate-500">
            <ShieldCheck className="size-4 text-red-500" aria-hidden />
            <span>{t("footer.secure")}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function EntryProgress({
  progress,
  steps,
  t,
}: Pick<PlayerEntryDesktopProps, "progress" | "steps" | "t">) {
  return (
    <>
      <div className="mb-8 flex items-center gap-3">
        <div className="flex size-10 items-center justify-center rounded-lg bg-red-600 text-white shadow-[0_6px_16px_rgba(220,38,38,0.2)]">
          <Globe className="size-5" aria-hidden />
        </div>
        <div>
          <h1 className="font-semibold text-slate-900">{t("loading.title")}</h1>
          <p className="mt-0.5 text-xs text-slate-500">{t("loading.progress")}</p>
        </div>
      </div>

      <div className="mb-8">
        <div className="mb-2 flex justify-between text-xs text-slate-500">
          <span>{t("loading.progress")}</span>
          <span className="font-semibold text-red-600">{progress}%</span>
        </div>
        <div className="h-2 overflow-hidden rounded-full bg-slate-100">
          <div
            className="h-full rounded-full bg-red-600 transition-all duration-500"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      <div className="space-y-5">
        {steps.map((step) => (
          <div key={step.id} className="flex items-start gap-3">
            <StepIcon status={step.status} />
            <div className="min-w-0 flex-1 pt-0.5">
              <div className="flex items-center justify-between gap-3">
                <span className="font-medium text-slate-800">{t(`steps.${step.id}.title`)}</span>
                <StepBadge status={step.status} />
              </div>
              <p className="mt-1 text-xs leading-5 text-slate-500">
                {t(`steps.${step.id}.description`)}
              </p>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function EntryFailure({
  details,
  mainSiteUrl,
  onRetry,
  t,
  tc,
}: Pick<PlayerEntryDesktopProps, "mainSiteUrl" | "onRetry" | "t" | "tc"> & {
  details: DesktopFailureRow[];
}) {
  return (
    <div>
      <div className="mb-7 text-center">
        <div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-red-50 text-red-600">
          <AlertTriangle className="size-7" aria-hidden />
        </div>
        <h1 className="text-xl font-bold text-red-600">{t("failure.title")}</h1>
        <p className="mt-1 text-sm text-slate-500">{t("failure.subtitle")}</p>
      </div>

      {details.length > 0 ? (
        <div className="mb-6 overflow-hidden rounded-xl border border-red-100 bg-red-50/60">
          <div className="border-b border-red-100 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-800">
            {t("failure.detailsTitle")}
          </div>
          <div className="divide-y divide-red-100">
            {details.map((detail, index) => (
              <div key={`${detail.code}-${index}`} className="grid grid-cols-[2rem_6.5rem_minmax(0,1fr)] gap-2 px-4 py-3 text-xs">
                <span className="text-slate-400">{index + 1}</span>
                <span className="font-medium text-slate-700">{detail.code ?? tc("errors.general")}</span>
                <span className="leading-5 text-slate-600">
                  {detail.detailKey
                    ? t(detail.detailKey)
                    : (detail.fallbackMessage ?? t("errors.unknown"))}
                </span>
              </div>
            ))}
          </div>
        </div>
      ) : null}

      <div className="flex gap-3">
        <Button onClick={onRetry} className="flex-1 gap-2 bg-red-600 text-white hover:bg-red-700" type="button">
          <RefreshCw className="size-4" aria-hidden />
          {t("failure.reenter")}
        </Button>
        {mainSiteUrl ? (
          <a
            href={mainSiteUrl}
            target="_top"
            rel="noopener noreferrer"
            className={cn(buttonVariants({ variant: "outline" }), "flex-1")}
          >
            {t("failure.backToMainSite")}
          </a>
        ) : null}
      </div>
    </div>
  );
}

function StepIcon({ status }: { status: DesktopEntryStepStatus }) {
  const className = cn(
    "flex size-8 shrink-0 items-center justify-center rounded-full border-2",
    status === "done" && "border-emerald-500 bg-emerald-500 text-white",
    status === "in-progress" && "border-blue-600 bg-blue-600 text-white",
    status === "pending" && "border-slate-200 bg-slate-50 text-slate-400",
    status === "error" && "border-red-500 bg-red-500 text-white",
  );

  return (
    <div className={className}>
      {status === "done" ? <CheckCircle2 className="size-4" aria-hidden /> : null}
      {status === "in-progress" ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
      {status === "pending" ? <div className="size-2 rounded-full bg-current" aria-hidden /> : null}
      {status === "error" ? <AlertCircle className="size-4" aria-hidden /> : null}
    </div>
  );
}

function StepBadge({ status }: { status: DesktopEntryStepStatus }) {
  const { t } = useTranslation("common");
  const className = cn(
    "shrink-0 rounded px-2 py-0.5 text-xs font-medium",
    status === "done" && "bg-emerald-50 text-emerald-700",
    status === "in-progress" && "bg-blue-50 text-blue-700",
    status === "pending" && "bg-slate-100 text-slate-500",
    status === "error" && "bg-red-50 text-red-700",
  );
  const label = {
    done: t("status.done"),
    "in-progress": t("status.inProgress"),
    pending: t("status.pending"),
    error: t("status.failed"),
  }[status];

  return <span className={className}>{label}</span>;
}