import { useAppStore } from '../../store/appStore';
import ItemPreview from '../asset/ItemPreview';
import ClassDetail from '../script/ClassDetail';
import FlowViewer from '../flow/FlowViewer';
import GumpPreview from '../gump/GumpPreview';
import ScriptGumpDetail from '../gump/ScriptGumpDetail';
import styles from './CenterPanel.module.css';

export default function CenterPanel() {
  const { centerMode, selectedTile, selectedGump, selectedScriptGump } = useAppStore();

  return (
    <div className={styles.panel}>
      {centerMode === 'empty' && (
        <div className={styles.empty}>
          <span className="font-cinzel">Select an item from the left panel</span>
        </div>
      )}
      {centerMode === 'asset_static' && selectedTile && (
        <ItemPreview tile={selectedTile} />
      )}
      {centerMode === 'script_class' && <ClassDetail />}
      {centerMode === 'flow_method' && <FlowViewer />}
      {centerMode === 'gump_render' && selectedScriptGump && (
        <ScriptGumpDetail />
      )}
      {centerMode === 'gump_render' && !selectedScriptGump && (
        <div className={styles.placeholder}>Gump Renderer — Phase 4</div>
      )}
      {centerMode === 'gump_image' && selectedGump && (
        <GumpPreview gump={selectedGump} />
      )}
    </div>
  );
}