import { useState, useEffect } from 'react';
import { Layout } from './components/Layout';
import { ConnectionTypeSelector } from './components/ConnectionTypeSelector';
import { SupportInput } from './components/inputs/SupportInput';
import { BeamInput } from './components/inputs/BeamInput';
import { AngleInput } from './components/inputs/AngleInput';
import { BoltsInput } from './components/inputs/BoltsInput';
import { WeldInput } from './components/inputs/WeldInput';
import { LoadsInput } from './components/inputs/LoadsInput';
import { ConnectionDiagram } from './components/diagrams/ConnectionDiagram';
import { ResultsSummary } from './components/results/ResultsSummary';
import { useConnectionStore } from './store/connectionStore';
import './App.css';

type MainTabType = 'support' | 'beam' | 'angle' | 'bolts' | 'weld' | 'loads' | 'results' | 'diagrams';

function App() {
  const [activeTab, setActiveTab] = useState<MainTabType>('support');
  const { angle, setAngle, calculate } = useConnectionStore();

  // Run calculations on mount and when inputs change
  useEffect(() => {
    calculate();
  }, [calculate]);

  return (
    <Layout>
      {/* Connection Type Selector */}
      <ConnectionTypeSelector />

      {/* Main Navigation Tabs */}
      <div className="main-tabs">
        <button
          className={`main-tab ${activeTab === 'support' ? 'active' : ''}`}
          onClick={() => setActiveTab('support')}
        >
          Support
        </button>
        <button
          className={`main-tab ${activeTab === 'beam' ? 'active' : ''}`}
          onClick={() => setActiveTab('beam')}
        >
          Beam
        </button>
        <button
          className={`main-tab ${activeTab === 'angle' ? 'active' : ''}`}
          onClick={() => setActiveTab('angle')}
        >
          Angle
        </button>
        <button
          className={`main-tab ${activeTab === 'bolts' ? 'active' : ''}`}
          onClick={() => {
            setActiveTab('bolts');
            if (angle.connectionMethod !== 'bolted') {
              setAngle({ connectionMethod: 'bolted' });
            }
          }}
        >
          Bolts
        </button>
        <button
          className={`main-tab ${activeTab === 'weld' ? 'active' : ''}`}
          onClick={() => {
            setActiveTab('weld');
            if (angle.connectionMethod !== 'welded') {
              setAngle({ connectionMethod: 'welded' });
            }
          }}
        >
          Weld
        </button>
        <button
          className={`main-tab ${activeTab === 'loads' ? 'active' : ''}`}
          onClick={() => setActiveTab('loads')}
        >
          Loads
        </button>
        <button
          className={`main-tab ${activeTab === 'results' ? 'active' : ''}`}
          onClick={() => setActiveTab('results')}
        >
          Results
        </button>
        <button
          className={`main-tab ${activeTab === 'diagrams' ? 'active' : ''}`}
          onClick={() => setActiveTab('diagrams')}
        >
          Diagrams
        </button>
      </div>

      <div style={{
        textAlign: 'center',
        fontSize: '0.85rem',
        color: '#666',
        marginTop: '8px',
        marginBottom: '16px',
        fontStyle: 'italic',
        background: '#f8f9fa',
        padding: '8px',
        borderRadius: '4px',
        border: '1px solid #e9ecef',
        display: 'inline-block',
        marginLeft: '50%',
        transform: 'translateX(-50%)'
      }}>
        ℹ️ Note: Switching between <strong>Bolts</strong> and <strong>Weld</strong> tabs will change the active connection method.
      </div>

      {/* Tab Content */}
      <div className="app-container">
        {activeTab === 'support' && (
          <div className="tab-content">
            <SupportInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'beam' && (
          <div className="tab-content">
            <BeamInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'angle' && (
          <div className="tab-content">
            <AngleInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'bolts' && (
          <div className="tab-content">
            <BoltsInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'weld' && (
          <div className="tab-content">
            <WeldInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'loads' && (
          <div className="tab-content">
            <LoadsInput />
            <ConnectionDiagram />
          </div>
        )}

        {activeTab === 'results' && (
          <div className="tab-content">
            <ResultsSummary />
          </div>
        )}

        {activeTab === 'diagrams' && (
          <div className="tab-content">
            <ConnectionDiagram />
          </div>
        )}
      </div>
    </Layout>
  );
}

export default App;