import { DeleteOutlined, MenuFoldOutlined, MenuUnfoldOutlined, ReloadOutlined } from "@ant-design/icons";
import type { MouseEvent as ReactMouseEvent } from "react";
import type { EcommerceHistoryRecord } from "../utils/clonePersistence";

interface CommandHistorySidebarProps {
  collapsed: boolean;
  showBackdrop: boolean;
  records: EcommerceHistoryRecord[];
  activeRecordId: string | null;
  isRefreshing: boolean;
  refreshMessage: string | null;
  refreshStamp: number;
  refreshTick: number;
  outputLabels: Array<{ key: string; label: string }>;
  formatHistoryTime: (timestamp: number) => string;
  onToggleCollapsed: () => void;
  onCollapse: () => void;
  onNewConversation: () => void;
  onRefresh: () => void;
  onOpenRecord: (record: EcommerceHistoryRecord) => void;
  onDeleteRecord: (recordId: string, event: ReactMouseEvent) => void;
}

// 生成记录侧栏：折叠/展开、新建对话、刷新历史、记录列表（点击查看/删除）。
export default function CommandHistorySidebar({
  collapsed,
  showBackdrop,
  records,
  activeRecordId,
  isRefreshing,
  refreshMessage,
  refreshStamp,
  refreshTick,
  outputLabels,
  formatHistoryTime,
  onToggleCollapsed,
  onCollapse,
  onNewConversation,
  onRefresh,
  onOpenRecord,
  onDeleteRecord,
}: CommandHistorySidebarProps) {
  return (
    <>
      {showBackdrop ? (
        <div className="ecom-command-history__backdrop" role="presentation" onClick={onCollapse} />
      ) : null}

      <aside className="ecom-command-history" aria-label="生成历史">
        <div className="ecom-command-history__tools">
          <button
            type="button"
            className="ecom-command-history__toggle"
            onClick={onToggleCollapsed}
            title={collapsed ? "展开记录" : "收起记录"}
            aria-label={collapsed ? "展开记录" : "收起记录"}
            aria-expanded={!collapsed}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </button>
          <button type="button" className="ecom-command-history__new" onClick={onNewConversation}>
            新对话
          </button>
          <button
            type="button"
            className={`ecom-command-history__refresh${isRefreshing ? " is-refreshing" : ""}`}
            aria-label={isRefreshing ? "刷新中" : "刷新历史"}
            title={isRefreshing ? "刷新中" : "刷新历史"}
            onPointerDown={onRefresh}
            onClick={onRefresh}
            disabled={isRefreshing}
          >
            <ReloadOutlined />
          </button>
        </div>
        <div className="ecom-command-history__heading">
          <strong>生成记录</strong>
          <span>{records.length} 条</span>
        </div>
        {refreshMessage ? (
          <p key={refreshStamp} className="ecom-command-history__refresh-note" role="status">
            {refreshMessage}
          </p>
        ) : null}
        <nav className="ecom-command-history__list" aria-label="历史对话">
          {records.length ? (
            records.map((record) => {
              const outputLabel = outputLabels.find((option) => option.key === record.output)?.label || "生成记录";
              const statusLabel =
                record.status === "generating" ? "生成中" : record.status === "failed" ? "失败" : formatHistoryTime(record.createdAt);
              return (
                <div key={`${record.id}-${refreshTick}`} className={`ecom-command-history__item${activeRecordId === record.id ? " is-active" : ""}`}>
                  <button type="button" className="ecom-command-history__item-main" onClick={() => onOpenRecord(record)}>
                    <strong>{record.title}</strong>
                    <span>{outputLabel} · {statusLabel}</span>
                  </button>
                  <button
                    type="button"
                    className="ecom-command-history__item-delete"
                    aria-label="删除此记录"
                    title="删除"
                    onClick={(e) => onDeleteRecord(record.id, e)}
                  >
                    <DeleteOutlined />
                  </button>
                </div>
              );
            })
          ) : (
            <p className="ecom-command-history__empty">暂无生成记录</p>
          )}
        </nav>
      </aside>
    </>
  );
}