"use client";

import { useRouter } from "next/navigation";
import { LogIn, UserPlus, X, Lock } from "lucide-react";
import { useLoginPrompt } from "@/lib/LoginPromptContext";
import { useTranslation } from "@/i18n";
import { AnimatedModal } from "@/components/motion/AnimatedModal";

export function LoginPromptModal() {
  const { isOpen, close } = useLoginPrompt();
  const router = useRouter();
  const { t } = useTranslation();

  const goTo = (path: string) => {
    close();
    router.push(path);
  };

  return (
    <AnimatedModal isOpen={isOpen} onBackdropClick={close} zIndex={400}>
      <div
        className="relative flex flex-col gap-5 px-6 py-6 w-[min(360px,90vw)]"
        style={{
          background: "var(--auth-card-bg)",
          borderRadius: 20,
          border: "1px solid var(--border)",
          boxShadow: "var(--auth-card-shadow)",
        }}
      >
        {/* Close */}
        <button
          onClick={close}
          className="absolute top-4 right-4 w-7 h-7 rounded-full flex items-center justify-center transition-colors"
          style={{
            background: "var(--btn-ghost-hover)",
            color: "var(--text-muted)",
          }}
        >
          <X size={14} strokeWidth={2.5} />
        </button>

        {/* Icon */}
        <div className="flex items-center justify-center">
          <div
            className="w-14 h-14 rounded-full flex items-center justify-center"
            style={{
              background: "rgba(var(--accent-rgb),0.12)",
              border: "1.5px solid rgba(var(--accent-rgb),0.3)",
            }}
          >
            <Lock size={24} color="var(--accent)" strokeWidth={1.8} />
          </div>
        </div>

        {/* Text */}
        <div className="text-center">
          <p
            className="text-base font-black tracking-tight mb-1.5"
            style={{ color: "var(--text-muted)" }}
          >
            {t("auth_loginRequired")}
          </p>
          <p
            className="text-[12px] leading-relaxed"
            style={{ color: "var(--text-muted)" }}
          >
            {t("auth_loginToContinue")}
          </p>
        </div>

        {/* Buttons */}
        <div className="flex flex-col gap-2.5">
          <button
            onClick={() => goTo("/auth/login")}
            className="h-11 rounded-xl text-[13px] font-black transition-all active:scale-[0.97] flex items-center justify-center gap-2"
            style={{
              background:
                "linear-gradient(135deg,var(--accent),var(--accent)cc)",
              boxShadow: "0 4px 18px rgba(var(--accent-rgb),0.35)",
              color: "var(--text-muted)",
            }}
          >
            <LogIn size={15} strokeWidth={2.5} />
            {t("auth_loginTab")}
          </button>
          <button
            onClick={() => goTo("/auth/signup")}
            className="h-11 rounded-xl text-[13px] font-bold transition-all active:scale-[0.97] flex items-center justify-center gap-2"
            style={{
              background: "var(--btn-ghost-hover)",
              color: "var(--text-primary)",
              border: "1px solid var(--border)",
            }}
          >
            <UserPlus size={15} strokeWidth={2} />
            {t("auth_createAccount")}
          </button>
        </div>
      </div>
    </AnimatedModal>
  );
}