import React from "react"
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons"
import { Popconfirm } from "antd"
import type { LibraryItem } from "@/pages/assets/types"
import { kindLabel } from "@/pages/assets/utils/asset"
import { kindIcon } from "@/pages/assets/utils/kindIcon"

/* ============================================================
 * LibrarySidebar — 左侧素材库列表
 * ============================================================ */
export interface LibrarySidebarProps {
  libraries: LibraryItem[]
  activeLibId: string
  onSelect: (id: string) => void
  onDelete: (id: string) => void
  onCreateClick: () => void
}

const LibrarySidebar: React.FC<LibrarySidebarProps> = ({
  libraries,
  activeLibId,
  onSelect,
  onDelete,
  onCreateClick,
}) => (
  <div className="xx-asset-library-list">
    {libraries.map((lib) => (
      <div
        key={lib.id}
        className={`xx-asset-library-item${lib.id === activeLibId ? " active" : ""}`}
        onClick={() => onSelect(lib.id)}
      >
        <div className="xx-asset-library-header">
          <h4>
            {kindIcon(lib.kind)} {lib.name}
          </h4>
          <Popconfirm
            title={`确定删除视频库 "${lib.name}"？`}
            onConfirm={(e) => {
              e?.stopPropagation()
              onDelete(lib.id)
            }}
            onCancel={(e) => e?.stopPropagation()}
            okText="删除"
            cancelText="取消"
          >
            <button
              className="xx-asset-library-delete"
              onClick={(e) => e.stopPropagation()}
              title="删除视频库"
            >
              <DeleteOutlined />
            </button>
          </Popconfirm>
        </div>
        <span>
          {kindLabel(lib.kind)} · {lib.count} 个素材
        </span>
      </div>
    ))}

    {/* 新建视频库 */}
    <div className="xx-asset-library-add" onClick={onCreateClick}>
      <PlusOutlined />
      新建视频库
    </div>
  </div>
)

export default LibrarySidebar