ERP-node/frontend/components/screen/toolbar/LeftV2Toolbar.tsx

"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Layout } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ToolbarButton {
  id: string;
  label: string;
  icon: React.ReactNode;
  shortcut: string;
  group: "source" | "editor";
  panelWidth: number;
}

interface LeftV2ToolbarProps {
  buttons: ToolbarButton[];
  panelStates: Record<string, { isOpen: boolean; badge?: number }>;
  onTogglePanel: (panelId: string) => void;
}

export const LeftV2Toolbar: React.FC<LeftV2ToolbarProps> = ({ buttons, panelStates, onTogglePanel }) => {
  // 그룹별로 버튼 분류
  const sourceButtons = buttons.filter((btn) => btn.group === "source");
  const editorButtons = buttons.filter((btn) => btn.group === "editor");

  const renderButton = (button: ToolbarButton) => {
    const isActive = panelStates[button.id]?.isOpen || false;
    const badge = panelStates[button.id]?.badge;

    return (
      <Button
        key={button.id}
        variant="ghost"
        onClick={() => onTogglePanel(button.id)}
        title={`${button.label} (${button.shortcut})`}
        className={cn(
          "flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-lg transition-all duration-200",
          isActive
            ? "bg-primary text-primary-foreground shadow-md hover:bg-primary/90"
            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
        )}
      >
        <div className="relative">
          {button.icon}
          {isActive && <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-white" />}
          {badge !== undefined && badge > 0 && (
            <div className="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white shadow-md">
              {badge > 99 ? "99+" : badge}
            </div>
          )}
        </div>
        <span className="text-[10px] font-medium">{button.label}</span>
      </Button>
    );
  };

  return (
    <div className="border-border bg-background flex h-full w-[60px] flex-col border-r">
      {/* 입력/소스 그룹 */}
      <div className="border-border flex flex-col gap-1 border-b p-1">{sourceButtons.map(renderButton)}</div>

      {/* 편집/설정 그룹 */}
      <div className="flex flex-col gap-1 p-1">{editorButtons.map(renderButton)}</div>

      {/* 하단 여백 */}
      <div className="flex-1" />
    </div>
  );
};

// 기본 버튼 설정 (통합 패널 1개)
export const defaultToolbarButtons: ToolbarButton[] = [
  // 통합 패널 (컴포넌트 + 편집 탭)
  {
    id: "v2",
    label: "패널",
    icon: <Layout className="h-5 w-5" />,
    shortcut: "P",
    group: "source",
    panelWidth: 240,
  },
];

export default LeftV2Toolbar;