import { useState } from 'react';
import { useAppStore, type LeftPanelTab } from '../../store/appStore';
import StaticBrowser from '../asset/StaticBrowser';
import ScriptTree from '../script/ScriptTree';
import GumpBrowser from '../gump/GumpBrowser';
import styles from './LeftPanel.module.css';

const TABS: { id: LeftPanelTab; label: string }[] = [
  { id: 'scripts', label: 'Scripts' },
  { id: 'statics', label: 'Statics' },
  { id: 'mobiles', label: 'Mobiles' },
  { id: 'gumps', label: 'Gumps' },
];

export default function LeftPanel() {
  const { activeTab, setActiveTab } = useAppStore();
  const [search, setSearch] = useState('');

  return (
    <div className={styles.panel}>
      <div className={styles.tabs}>
        {TABS.map((t) => (
          <button
            key={t.id}
            className={`${styles.tab} ${activeTab === t.id ? styles.active : ''}`}
            onClick={() => { setActiveTab(t.id); setSearch(''); }}
          >
            {t.label}
          </button>
        ))}
      </div>

      <div className={styles.search}>
        <input
          type="text"
          placeholder="Search…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className={styles.searchInput}
        />
      </div>

      <div className={styles.content}>
        {activeTab === 'statics' && <StaticBrowser search={search} />}
        {activeTab === 'scripts' && <ScriptTree search={search} />}
        {activeTab === 'mobiles' && (
          <div className={styles.placeholder}>Mobile browser — Phase 1 (coming)</div>
        )}
        {activeTab === 'gumps' && <GumpBrowser search={search} />}
      </div>
    </div>
  );
}