/** Work Mode 切换器组件 — Overview/Compare/Focus/Queue 四种自适应模式。 */

"use client";

import { LayoutGrid, GitCompareArrows, Focus, Columns2 } from "lucide-react";
import { useState, type ReactNode } from "react";

/** 工作模式类型。 */
export type WorkMode = "overview" | "compare" | "focus" | "queue";

/** 工作模式配置。 */
const MODE_CONFIG: Record<WorkMode, { label: string; icon: typeof LayoutGrid; description: string }> = {
  overview: {
    label: "总览",
    icon: LayoutGrid,
    description: "Portfolio 全局浏览",
  },
  compare: {
    label: "对比",
    icon: GitCompareArrows,
    description: "2-5 家企业并排对比",
  },
  focus: {
    label: "聚焦",
    icon: Focus,
    description: "单企业深度分析",
  },
  queue: {
    label: "队列",
    icon: Columns2,
    description: "左右分栏批量处理",
  },
};

/** Work Mode 切换器 Props。 */
interface WorkModeSwitcherProps {
  mode: WorkMode;
  onChange: (mode: WorkMode) => void;
}

/**
 * Work Mode 切换器组件。
 *
 * 四种自适应工作模式：Overview / Compare / Focus / Queue。
 */
export function WorkModeSwitcher({ mode, onChange }: WorkModeSwitcherProps) {
  return (
    <div className="flex items-center gap-1 rounded-lg border bg-white p-1">
      {(Object.keys(MODE_CONFIG) as WorkMode[]).map((key) => {
        const config = MODE_CONFIG[key];
        const isActive = mode === key;
        return (
          <button
            key={key}
            type="button"
            onClick={() => onChange(key)}
            title={config.description}
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
              isActive
                ? "bg-indigo-50 text-indigo-600"
                : "text-gray-600 hover:bg-gray-50"
            }`}
            aria-pressed={isActive}
          >
            <config.icon size={16} aria-hidden="true" />
            {config.label}
          </button>
        );
      })}
    </div>
  );
}