import React, { useCallback, 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 Option Sets';

interface LabelsViewProps {
  currentView?: string;
  onViewChange?: (view: string) => void;
  /** 标签模板新增/编辑时 true，用于布局层隐藏侧栏与顶栏 */
  onLabelTemplateEditorLayoutOverlay?: (fullscreen: boolean) => void;
}

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

  const handleTemplateEditorOverlay = useCallback(
    (fullscreen: boolean) => {
      setTemplateEditorHidesTabs(fullscreen);
      onLabelTemplateEditorLayoutOverlay?.(fullscreen);
    },
    [onLabelTemplateEditorLayoutOverlay],
  );

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

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

  return (
    <div
      className={`flex h-full flex-col ${templateEditorHidesTabs ? "gap-0" : "gap-6"}`}
      style={{ minHeight: 0, height: "100%", display: "flex", flexDirection: "column" }}
    >
      {/* 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>
      )}

      {/* min-h-0 未进预编译 CSS，用内联保证模板编辑区能拿到剩余高度 */}
      <div
        className="flex flex-1 flex-col overflow-hidden"
        style={{ flex: "1 1 0%", minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}
      >
        {currentView === 'Labels' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <LabelsList />
          </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 flex-1 flex-col overflow-hidden"
            style={{ flex: "1 1 0%", minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden" }}
          >
            <LabelTemplatesView onTemplateEditorOverlayChange={handleTemplateEditorOverlay} />
          </div>
        )}
        {currentView === 'Multiple Option Sets' && (
          <div className="min-h-0 flex-1 overflow-auto">
            <MultipleOptionsView />
          </div>
        )}
        {!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Option Sets'].includes(currentView) && (
          <div className="flex h-64 items-center justify-center text-gray-400">
            {currentView} content coming soon...
          </div>
        )}
      </div>
    </div>
  );
}