import React, { useState } from 'react';
import { Layout } from './components/Layout';
import { SteelPropertiesInput } from './components/inputs/SteelPropertiesInput';
import { BeamGeometryInput } from './components/inputs/BeamGeometryInput';
import { LateralBracingInput } from './components/inputs/LateralBracingInput';
import { ConcretePropertiesInput } from './components/inputs/ConcretePropertiesInput';
import { CompositeBeamInput } from './components/inputs/CompositeBeamInput';
import { LoadsInput } from './components/inputs/LoadsInput';
import { LoadCombinationsInput } from './components/inputs/LoadCombinationsInput';
import { ShearDiagram } from './components/diagrams/ShearDiagram';
import { MomentDiagram } from './components/diagrams/MomentDiagram';
import { DetailedReport } from './components/results/DetailedReport';
import './App.css';

type TabType = 'steel-beam' | 'slab-deck' | 'loads' | 'at-a-glance' | 'condensed' | 'detailed' | 'graphs';

function App() {
  const [activeTab, setActiveTab] = useState<TabType>('steel-beam');

  return (
    <Layout>
      {/* Main Navigation Tabs */}
      <div className="main-tabs">
        <button
          className={`main-tab ${activeTab === 'steel-beam' ? 'active' : ''}`}
          onClick={() => setActiveTab('steel-beam')}
        >
          Steel Beam
        </button>
        <button
          className={`main-tab ${activeTab === 'slab-deck' ? 'active' : ''}`}
          onClick={() => setActiveTab('slab-deck')}
        >
          Slab & Deck
        </button>
        <button
          className={`main-tab ${activeTab === 'loads' ? 'active' : ''}`}
          onClick={() => setActiveTab('loads')}
        >
          Loads
        </button>
        <button
          className={`main-tab ${activeTab === 'at-a-glance' ? 'active' : ''}`}
          onClick={() => setActiveTab('at-a-glance')}
        >
          At-A-Glance Calcs
        </button>
        <button
          className={`main-tab ${activeTab === 'condensed' ? 'active' : ''}`}
          onClick={() => setActiveTab('condensed')}
        >
          Condensed Calcs
        </button>
        <button
          className={`main-tab ${activeTab === 'detailed' ? 'active' : ''}`}
          onClick={() => setActiveTab('detailed')}
        >
          Detailed Calcs
        </button>
        <button
          className={`main-tab ${activeTab === 'graphs' ? 'active' : ''}`}
          onClick={() => setActiveTab('graphs')}
        >
          Graphs
        </button>
      </div>

      {/* Tab Content */}
      <div className="app-container">
        {activeTab === 'steel-beam' && (
          <div className="tab-content">
            <div className="content-grid">
              <SteelPropertiesInput />
              <BeamGeometryInput />
            </div>
            <LateralBracingInput />
            <LoadCombinationsInput />
          </div>
        )}

        {activeTab === 'slab-deck' && (
          <div className="tab-content">
            <ConcretePropertiesInput />
            <CompositeBeamInput />
          </div>
        )}

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

        {activeTab === 'at-a-glance' && (
          <div className="tab-content">
            <div className="card">
              <h2 style={{ marginBottom: '16px' }}>At-A-Glance Results</h2>
              <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                At-a-glance results view (summary tables) - Coming soon
              </div>
            </div>
          </div>
        )}

        {activeTab === 'condensed' && (
          <div className="tab-content">
            <div className="card">
              <h2 style={{ marginBottom: '16px' }}>Condensed Calculations</h2>
              <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                Condensed calculation report - Coming soon
              </div>
            </div>
          </div>
        )}

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

        {activeTab === 'graphs' && (
          <div className="tab-content">
            <ShearDiagram />
            <MomentDiagram />
          </div>
        )}
      </div>
    </Layout>
  );
}

export default App;