"use client";

import Image from "next/image";
import Link from "next/link";
import { TEXT } from "@/branding";
import { IMAGES } from "@/branding/images";
import { LoginForm } from "./LoginForm";
import { useTranslation } from "@/i18n";
import { useRouter } from "next/navigation";

export function LoginPage() {
  const { t } = useTranslation();
  const router = useRouter();

  return (
    <div
      className="rounded-2xl p-8"
      style={{
        background: "var(--auth-card-bg)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        border: "1px solid var(--border)",
        boxShadow: "var(--auth-card-shadow)",
      }}
    >
      {/* Logo — mobile only */}
      <div
        className="flex items-center gap-2.5 mb-6 lg:hidden cursor-pointer"
        onClick={() => router.push("/")}
      >
        <Image
          src={IMAGES.appIcon}
          alt={TEXT.app.name}
          width={36}
          height={36}
          className="rounded-xl shrink-0"
          priority
        />
        <span className="font-bold text-lg" style={{ color: "var(--text-primary)" }}>
          {TEXT.app.name}
        </span>
      </div>

      {/* Heading */}
      <h1 className="text-2xl font-black tracking-tight mb-1" style={{ color: "var(--text-primary)" }}>
        {t("auth_welcomeBack")}
      </h1>
      <p className="text-sm mb-7" style={{ color: "var(--text-muted)" }}>
        {t("auth_loginSubtext")}
      </p>

      {/* Tabs */}
      <AuthTabs active="login" />

      <LoginForm />

      {/* Footer */}
      <p className="text-xs text-center mt-6" style={{ color: "var(--text-muted)" }}>
        {t("auth_noAccount")}{" "}
        <Link
          href="/auth/signup"
          className="font-semibold transition-opacity hover:opacity-80"
          style={{ color: "var(--accent)" }}
        >
          {t("auth_signUpLink")}
        </Link>
      </p>
    </div>
  );
}

function AuthTabs({ active }: { active: "login" | "signup" }) {
  const { t } = useTranslation();
  return (
    <div
      className="flex rounded-xl mb-7 p-1 gap-1"
      style={{ background: "var(--deep)" }}
    >
      <Link
        href="/auth/login"
        className="flex-1 py-2 text-xs font-semibold text-center rounded-lg transition-all duration-150"
        style={
          active === "login"
            ? { background: "var(--accent)", color: "#fff" }
            : { color: "var(--text-muted)" }
        }
      >
        {t("auth_loginTab")}
      </Link>
      <Link
        href="/auth/signup"
        className="flex-1 py-2 text-xs font-semibold text-center rounded-lg transition-all duration-150"
        style={
          active === "signup"
            ? { background: "var(--accent)", color: "#fff" }
            : { color: "var(--text-muted)" }
        }
      >
        {t("auth_signupTab")}
      </Link>
    </div>
  );
}

export { AuthTabs };