"use client";

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

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

import { LanguageSwitcher } from "@/components/language-switcher";
import {
  playerHeaderControl,
  playerPageHeader,
  playerPageInset,
} 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 } = useTranslation("common");
  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(
          "overflow-hidden bg-white text-slate-900",
          playerPageInset,
          className,
        )}
      >
        <header className={playerPageHeader}>
          <div className="flex min-w-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>

          <div className="min-w-0 max-w-[min(52vw,12rem)] justify-self-center text-center">
            <h1 className="truncate text-base font-black leading-tight text-[#0b3f96]">
              {title}
            </h1>
          </div>

          <div className="flex min-w-0 items-center justify-end gap-1">
            <LanguageSwitcher
              variant="minimal"
              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",
              )}
            />
            <button
              type="button"
              className={cn(
                playerHeaderControl,
                "relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
              )}
              aria-label={t("navigation.notifications")}
            >
              <Bell className="size-4" aria-hidden />
              <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
            </button>
          </div>
        </header>
        {children}
      </section>
    </div>
  );
}