import React, { useState } from 'react';
import { LabelsList } from './LabelsList';
import { LabelCategoriesView } from './LabelCategoriesView';
import { LabelTypesView } from './LabelTypesView';
import { LabelTemplatesView } from './LabelTemplatesView';
import { MultipleOptionsView } from './MultipleOptionsView';

type Tab = 'Labels' | 'Label Categories' | 'Label Types' | 'Label Templates' | 'Multiple Options';

interface LabelsViewProps {
  currentView?: string;
  onViewChange?: (view: string) => void;
  /** Dashboard「New Label」递增；由 Labels 列表消费后应调用 onLabelCreateIntentConsumed */
  labelCreateOpenSeq?: number;
  onLabelCreateIntentConsumed?: () => void;
}

export function LabelsView({
  currentView = 'Labels',
  onViewChange,
  labelCreateOpenSeq = 0,
  onLabelCreateIntentConsumed,
}: LabelsViewProps) {
  const [templateEditorHidesTabs, setTemplateEditorHidesTabs] = useState(false);

  const tabs: Tab[] = [
    'Labels',
    'Label Categories',
    'Label Types',
    'Label Templates',
    'Multiple Options'
  ];

  const handleTabClick = (tab: Tab) => {
    if (onViewChange) {
      onViewChange(tab);
    }
  };

  return (
    <div
      className={`flex h-full min-h-0 flex-col ${templateEditorHidesTabs ? 'gap-0' : 'gap-6'}`}
    >
      {/* Tabs：模板编辑器全屏编辑时隐藏 */}
      {!templateEditorHidesTabs && (
        <div className="w-full shrink-0 border-b border-gray-200">
          <div className="flex overflow-x-auto bg-white">
            {tabs.map((tab) => (
              <div
                key={tab}
                onClick={() => handleTabClick(tab)}
                style={
                  currentView === tab
                    ? { borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: '#2563eb' }
                    : undefined
                }
                className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px ${
                  currentView === tab
                    ? 'text-blue-600'
                    : 'border-b-2 border-b-transparent text-gray-600 hover:text-gray-800'
                }`}
              >
                {tab}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Content：Label Templates 编辑态需占满主区域高度，故用 flex-1 + min-h-0 传递 */}
      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
        {currentView === 'Labels' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <LabelsList
              openCreateSeq={labelCreateOpenSeq}
              onOpenCreateIntentConsumed={onLabelCreateIntentConsumed}
            />
          </div>
        )}
        {currentView === 'Label Categories' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <LabelCategoriesView />
          </div>
        )}
        {currentView === 'Label Types' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <LabelTypesView />
          </div>
        )}
        {currentView === 'Label Templates' && (
          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <LabelTemplatesView onTemplateEditorOverlayChange={setTemplateEditorHidesTabs} />
          </div>
        )}
        {currentView === 'Multiple Options' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <MultipleOptionsView />
          </div>
        )}
        {!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
          <div className="flex h-64 items-center justify-center text-gray-400">
            {currentView} content coming soon...
          </div>
        )}
      </div>
    </div>
  );
}