import { X } from "lucide-react";
import { memo, type ReactNode } from "react";
import type { SidePanelTab } from "../hooks/useSidePanelState";

export type SidePanelTabConfig = {
  key: SidePanelTab;
  label: string;
  count: number;
  content: ReactNode;
};

interface SidePanelProps {
  open: boolean;
  mounted: boolean;
  tab: SidePanelTab;
  tabs: SidePanelTabConfig[];
  onTabChange: (tab: SidePanelTab) => void;
  onClose: () => void;
}

// 右侧（竖屏为底部抽屉）的侧栏外壳：评论 / TA的作品 / 搜索结果（或 hashtag）几个标签页
export const SidePanel = memo(function SidePanel({
  open,
  mounted,
  tab,
  tabs,
  onTabChange,
  onClose,
}: SidePanelProps) {
  const visibility = open
    ? "translate-y-0 pointer-events-auto landscape:w-[min(420px,36vw)] landscape:border-l landscape:border-white/10"
    : "translate-y-full pointer-events-none landscape:w-0 landscape:border-l-0";
  // 竖屏时作品网格不需要那么高，给视频多留点位置
  const portraitHeight =
    tab === "comments" ? "h-[min(80vh,88dvh)]" : "h-[min(62vh,64dvh)]";

  return (
    <aside
      className={`
        z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white overflow-hidden
        fixed inset-x-0 bottom-0 w-full ${portraitHeight} border-t border-white/10 rounded-t-2xl
        landscape:relative landscape:inset-auto landscape:h-full landscape:translate-y-0 landscape:border-t-0 landscape:rounded-none
        ${mounted ? "transition-transform landscape:transition-[width] duration-200 ease-out" : ""}
        ${visibility}
      `}
    >
      <div className="flex items-center gap-1 px-3 border-b border-white/10 shrink-0">
        <div
          className="flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
          role="tablist"
        >
          {tabs.map((t) => (
            <button
              key={t.key}
              type="button"
              role="tab"
              aria-selected={tab === t.key}
              onClick={() => onTabChange(t.key)}
              className={`relative shrink-0 max-w-[10em] truncate py-3 text-[15px] transition-colors cursor-pointer ${
                tab === t.key
                  ? "font-semibold text-white"
                  : "text-white/55 hover:text-white/80"
              }`}
            >
              {t.label}
              {t.count > 0 && (
                <span className="ml-1 text-xs font-normal text-white/50">
                  {t.count}
                </span>
              )}
              {tab === t.key && (
                <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-rose-400" />
              )}
            </button>
          ))}
        </div>
        <button
          type="button"
          className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors cursor-pointer"
          onClick={onClose}
          aria-label="关闭侧栏"
        >
          <X size={18} />
        </button>
      </div>

      {tabs.map((t) => (
        <div
          key={t.key}
          className={tab === t.key ? "flex min-h-0 flex-1 flex-col" : "hidden"}
        >
          {t.content}
        </div>
      ))}
    </aside>
  );
});