import type { ReactNode } from "react";
import { cn } from "./utils/cn";

/**
 * SlotPlaceholder - 空 slot 占位组件（portal-shell spec §7.3）
 *
 * 当 slot 中没有可见插件时显示此占位。
 * admin 模式下显示"添加插件"按钮，普通模式下显示空态提示。
 *
 * v2.0 令牌迁移：shadcn 标准令牌
 *
 * @example
 * <SlotPlaceholder slotName="main" isAdmin={false} />
 * <SlotPlaceholder slotName="side" isAdmin={true} onAddPlugin={() => openDialog()} />
 */
export interface SlotPlaceholderProps {
  /** slot 名称 */
  slotName: string;
  /** 是否为 admin 模式（admin 模式显示添加按钮） */
  isAdmin?: boolean;
  /** 添加插件回调（admin 模式下点击触发） */
  onAddPlugin?: () => void;
  /** 自定义类名 */
  className?: string;
}

export function SlotPlaceholder({
  slotName,
  isAdmin = false,
  onAddPlugin,
  className,
}: SlotPlaceholderProps): ReactNode {
  return (
    <div
      className={cn(
        "rounded-xl border bg-card p-4 text-sm text-muted-foreground",
        className,
      )}
    >
      {isAdmin ? (
        <div className="flex items-center justify-between">
          <span>slot「{slotName}」暂无插件</span>
          {onAddPlugin ? (
            <button
              type="button"
              onClick={onAddPlugin}
              className="rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground"
            >
              添加插件
            </button>
          ) : null}
        </div>
      ) : (
        <span>暂无可见插件</span>
      )}
    </div>
  );
}