"use client";

import Link from "next/link";
import type { ReactNode } from "react";

import { ChevronLeft } from "lucide-react";
import { useTranslation } from "react-i18next";

import { LanguageSwitcher } from "@/components/language-switcher";
import { PlayerNotificationBell } from "@/components/layout/player-notification-bell";
import {
  playerHeaderControl,
  playerPageHeader,
} from "@/lib/player-spacing";
import { cn } from "@/lib/utils";

type PlayerPanelProps = {
  title: string;
  children: ReactNode;
  backHref?: string;
  backLabel?: string;
  className?: string;
  containerClassName?: string;
};

export function PlayerPanel({
  title,
  children,
  backHref = "/hall",
  backLabel,
  className,
  containerClassName,
}: PlayerPanelProps) {
  const { t: tp } = useTranslation("player");
  const resolvedBackLabel = backLabel ?? tp("panel.home");

  return (
    <div className={cn("mx-auto w-full max-w-[480px]", containerClassName)}>
      <section
        className={cn(
          "bg-white text-slate-900 min-h-screen",
          "px-3 pb-6",
          className,
        )}
      >
        <header
          className={cn(
            playerPageHeader,
            "sticky top-0 z-50 bg-white/95 backdrop-blur pt-2 pb-2 -mx-3 px-3",
          )}
        >
          <div className="relative z-[1] flex min-w-0 max-w-[38%] shrink-0 justify-start">
            <Link
              href={backHref}
              className={cn(
                playerHeaderControl,
                "gap-0.5 rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
              )}
            >
              <ChevronLeft className="size-4 shrink-0" aria-hidden />
              <span className="max-w-[4.5rem] truncate">{resolvedBackLabel}</span>
            </Link>
          </div>

          <h1
            className="pointer-events-none absolute top-1/2 right-[5.25rem] left-[5.25rem] z-0 -translate-y-1/2 truncate text-center text-base font-black leading-tight text-[#0b3f96]"
          >
            {title}
          </h1>

          <div className="relative z-[1] flex min-w-0 max-w-[48%] shrink-0 items-center justify-end gap-0.5">
            <LanguageSwitcher
              variant="minimal"
              menuAlign="end"
              showFlag={false}
              className={cn(
                playerHeaderControl,
                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
              )}
            />
            <PlayerNotificationBell />
          </div>
        </header>
        {children}
      </section>
    </div>
  );
}
