import React, { useEffect, useState } from 'react';
import Map3D from './components/Map3D';
import ControlPanel from './components/ControlPanel';
import VoiceControl from './components/VoiceControl';
import StatsPanel from './components/StatsPanel';
import GroupsPanel from './components/GroupsPanel';
import TaskPanel from './components/TaskPanel';
import PathRecorder from './components/PathRecorder';
import MiningAreasPanel from './components/MiningAreasPanel';
import { useTurtleStore } from './store/turtleStore';
import './App.css';

function App() {
  const connect = useTurtleStore((state) => state.connect);
  const [view, setView] = useState('split'); // 'split', 'map', 'panel'
  const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks', 'paths', 'areas'
  const turtles = useTurtleStore((state) => state.getTurtleArray());
  const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());

  useEffect(() => {
    connect();
  }, [connect]);

  const renderPanelContent = () => {
    const apiUrl = 'http://localhost:3001';
    const wsUrl = 'ws://localhost:3002';

    switch (panelTab) {
      case 'control':
        return <ControlPanel />;
      case 'voice':
        return <VoiceControl turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
      case 'stats':
        return <StatsPanel selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
      case 'groups':
        return <GroupsPanel turtles={turtles} apiUrl={apiUrl} wsUrl={wsUrl} />;
      case 'tasks':
        return <TaskPanel turtles={turtles} apiUrl={apiUrl} />;
      case 'paths':
        return <PathRecorder turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
      case 'areas':
        return <MiningAreasPanel turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
      default:
        return <ControlPanel />;
    }
  };

  return (
    <div className="app">
      <div className="view-controls">
        <button 
          className={view === 'split' ? 'active' : ''}
          onClick={() => setView('split')}
        >
          📊 Split View
        </button>
        <button 
          className={view === 'map' ? 'active' : ''}
          onClick={() => setView('map')}
        >
          🗺️ Map Only
        </button>
        <button 
          className={view === 'panel' ? 'active' : ''}
          onClick={() => setView('panel')}
        >
          🎮 Control Only
        </button>
      </div>

      <div className={`app-content ${view}`}>
        {(view === 'split' || view === 'map') && (
          <div className="map-container">
            <Map3D />
          </div>
        )}
        {(view === 'split' || view === 'panel') && (
          <div className="panel-container">
            <div className="panel-tabs">
              <button 
                className={panelTab === 'control' ? 'active' : ''}
                onClick={() => setPanelTab('control')}
                title="Turtle Control"
              >
                🎮 Control
              </button>
              <button 
                className={panelTab === 'voice' ? 'active' : ''}
                onClick={() => setPanelTab('voice')}
                title="Voice Commands"
              >
                🎤 Voice
              </button>
              <button 
                className={panelTab === 'stats' ? 'active' : ''}
                onClick={() => setPanelTab('stats')}
                title="Mining Statistics"
              >
                📊 Stats
              </button>
              <button 
                className={panelTab === 'groups' ? 'active' : ''}
                onClick={() => setPanelTab('groups')}
                title="Turtle Groups"
              >
                👥 Groups
              </button>
              <button 
                className={panelTab === 'tasks' ? 'active' : ''}
                onClick={() => setPanelTab('tasks')}
                title="Task Queue"
              >
                📋 Tasks
              </button>
              <button 
                className={panelTab === 'paths' ? 'active' : ''}
                onClick={() => setPanelTab('paths')}
                title="Path Recording"
              >
                🛤️ Paths
              </button>
              <button 
                className={panelTab === 'areas' ? 'active' : ''}
                onClick={() => setPanelTab('areas')}
                title="Mining Areas"
              >
                ⛏️ Areas
              </button>
            </div>
            <div className="panel-content-wrapper">
              {renderPanelContent()}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;