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 [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 = import.meta.env.VITE_API_URL || `${window.location.protocol}//${window.location.host}`;
    const wsUrl = import.meta.env.VITE_WS_URL || `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws`;

    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="app-content split">
        <div className="map-container">
          <Map3D />
        </div>
        <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;