make-comics/components/editor/page-sidebar.tsx

"use client";

import { Plus, Loader2, Key, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { UserButton, Show } from "@clerk/nextjs";

interface PageData {
  id: number;
  title: string;
  image: string;
  prompt: string;
  characterUpload?: string;
  style: string;
}

interface PageSidebarProps {
  pages: PageData[];
  currentPage: number;
  onPageSelect: (index: number) => void;
  onAddPage: () => void;
  loadingPageId?: number | null;
  onApiKeyClick?: () => void;
  isOwner?: boolean;
}

export function PageSidebar({
  pages,
  currentPage,
  onPageSelect,
  onAddPage,
  loadingPageId,
  onApiKeyClick,
  isOwner = true,
}: PageSidebarProps) {
  return (
    <aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between h-full">
      {/* Top section: page thumbnails */}
      <div className="flex-1 w-full overflow-y-auto min-h-0 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/60 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground">
        <div className="flex flex-col items-center gap-3 px-2 py-1">
          {pages.map((page, index) => (
            <button
              key={page.id}
              onClick={() => onPageSelect(index)}
              disabled={loadingPageId === index}
              className={`
                w-16 h-16 rounded-lg transition-all relative overflow-hidden flex-shrink-0
                ${
                  currentPage === index
                    ? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
                    : "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
                }
                ${loadingPageId === index ? "opacity-50" : ""}
              `}
            >
              {loadingPageId === index ? (
                <div className="w-full h-full flex items-center justify-center">
                  <Loader2 className="w-6 h-6 animate-spin text-white" />
                </div>
              ) : (
                <>
                  <img
                    src={page.image || "/placeholder.svg"}
                    alt={`Page ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                  <div
                    className={`
                    absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
                    ${
                      currentPage === index
                        ? "bg-indigo text-white"
                        : "bg-black/70 text-white"
                    }
                  `}
                  >
                    {index + 1}
                  </div>
                </>
              )}
            </button>
          ))}

          {isOwner && (
            <button
              onClick={onAddPage}
              className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center flex-shrink-0"
            >
              <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
            </button>
          )}
        </div>
      </div>

      <div className="flex flex-col items-center gap-3 pt-2">
        {/* API Key Button */}
        <Button
          onClick={onApiKeyClick}
          variant="ghost"
          size="icon"
          className="w-10 h-10 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
          title="Manage API Key"
        >
          <Key className="w-4 h-4" />
        </Button>

        <Show when="signed-in">
          <div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
            <UserButton
              appearance={{
                elements: {
                  avatarBox: "w-full h-full rounded-md",
                },
              }}
            />
          </div>
        </Show>
      </div>
    </aside>
  );
}