import { Tag, X } from "lucide-react";

export interface TagPanelProps {
  /** 已加载的全部主案标签；null 表示尚未加载。 */
  tags: string[] | null;
  /** 当前选中的标签集合（多选 OR 语义）。 */
  selectedTags: string[];
  /** 是否处于加载中。 */
  loading: boolean;
  /** 错误信息；非空时显示重试入口。 */
  error: string | null;
  /** 切换某个标签的选中状态：未选→选、已选→取消。 */
  onToggleTag: (tag: string) => void;
  /** 清空全部选中标签。 */
  onClear: () => void;
  /** 错误状态下用户点击重试。 */
  onRetry: () => void;
}

/**
 * 左侧主案标签筛选条。
 *
 * - 换行布局（`flex flex-wrap`），标签数量不限；
 * - 多选 OR 语义由父组件维护（这里只负责展示与点击）；
 * - 不显示计数，保持视觉简洁；
 * - 空标签集（后端返回无标签）显示"暂无标签"占位。
 */
export function TagPanel({
  tags,
  selectedTags,
  loading,
  error,
  onToggleTag,
  onClear,
  onRetry,
}: TagPanelProps) {
  const hasSelection = selectedTags.length > 0;
  const isEmpty = !loading && !error && (tags?.length ?? 0) === 0;

  return (
    <section
      aria-label="主案标签筛选"
      className="mt-3 rounded-md border bg-white"
      style={{ borderColor: "rgba(40,118,193,.25)" }}
    >
      <header
        className="flex items-center justify-between px-3 py-2 text-white rounded-t-md"
        style={{ background: "#1A5299" }}
      >
        <div className="flex items-center gap-1.5 text-[12px] font-black tracking-wide">
          <Tag size={13} />
          标签
        </div>
        {hasSelection && (
          <button
            type="button"
            onClick={onClear}
            className="flex items-center gap-1 text-[11px] font-bold text-white/80 hover:text-white"
            aria-label="清除标签筛选"
          >
            <X size={11} />
            清除
          </button>
        )}
      </header>
      <div className="p-3">
        {loading && (
          <div className="text-[11px] font-bold opacity-60" style={{ color: "#1A5299" }}>
            正在加载标签…
          </div>
        )}
        {error && (
          <div className="flex flex-col items-start gap-2">
            <span className="text-[11px] font-bold text-red-600">{error}</span>
            <button
              type="button"
              onClick={onRetry}
              className="px-2 py-1 text-[11px] font-black border"
              style={{ borderColor: "#3191eb", color: "#1A5299" }}
            >
              重试
            </button>
          </div>
        )}
        {isEmpty && (
          <div className="text-[11px] font-bold opacity-50" style={{ color: "#1A5299" }}>
            暂无标签
          </div>
        )}
        {tags && tags.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {tags.map((tag) => {
              const selected = selectedTags.includes(tag);
              return (
                <button
                  key={tag}
                  type="button"
                  onClick={() => onToggleTag(tag)}
                  aria-pressed={selected}
                  title={selected ? `取消筛选：${tag}` : `按标签筛选：${tag}`}
                  className={[
                    "px-2 py-1 text-[11px] font-bold rounded-full border transition-colors",
                    selected
                      ? "text-white border-transparent"
                      : "border-[rgba(40,118,193,.4)] text-[#1A5299] hover:bg-[rgba(49,145,235,.1)]",
                  ].join(" ")}
                  style={selected ? { background: "#1A5299" } : undefined}
                >
                  {tag}
                </button>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}
