import { useState, useEffect } from 'react';
import { Layout } from './components/Layout';
import { GeometryInput } from './components/inputs/GeometryInput';
import { LoadsInput } from './components/inputs/LoadsInput';
import { MaterialsInput } from './components/inputs/MaterialsInput';
import { DesignInput } from './components/inputs/DesignInput';
import { ReinforcementInput } from './components/inputs/ReinforcementInput';
import { ResultsSummary } from './components/results/ResultsSummary';
import { DetailedReport } from './components/results/DetailedReport';
import { PileCapDiagram } from './components/diagrams/PileCapDiagram';
import { ElevationDiagram } from './components/diagrams/ElevationDiagram';
import { PileReactionsDiagram } from './components/diagrams/PileReactionsDiagram';
import { PunchingShearDiagram } from './components/diagrams/PunchingShearDiagram';
import { FlexuralDiagram } from './components/diagrams/FlexuralDiagram';
import { InteractionDiagram } from './components/diagrams/InteractionDiagram';
import { ConstructionDiagram } from './components/diagrams/ConstructionDiagram';
import { usePileCapStore } from './store/pileCapStore';
import './App.css';

type MainTabType = 'geometry' | 'loads' | 'materials' | 'reinforcement' | 'results' | 'diagrams' | 'report';

function App() {
  const [activeTab, setActiveTab] = useState<MainTabType>('geometry');
  const calculate = usePileCapStore(state => state.calculate);

  // Run initial calculation
  useEffect(() => {
    calculate();
  }, [calculate]);

  return (
    <Layout>
      {/* Main Navigation Tabs */}
      <div className="main-tabs">
        <button
          className={`main-tab ${activeTab === 'geometry' ? 'active' : ''}`}
          onClick={() => setActiveTab('geometry')}
        >
          Geometry
        </button>
        <button
          className={`main-tab ${activeTab === 'loads' ? 'active' : ''}`}
          onClick={() => setActiveTab('loads')}
        >
          Loads
        </button>
        <button
          className={`main-tab ${activeTab === 'materials' ? 'active' : ''}`}
          onClick={() => setActiveTab('materials')}
        >
          Materials
        </button>
        <button
          className={`main-tab ${activeTab === 'reinforcement' ? 'active' : ''}`}
          onClick={() => setActiveTab('reinforcement')}
        >
          Reinforcement
        </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>
        <button
          className={`main-tab ${activeTab === 'report' ? 'active' : ''}`}
          onClick={() => setActiveTab('report')}
        >
          Report
        </button>
      </div>

      {/* Tab Content */}
      <div className="app-container">
        {activeTab === 'geometry' && (
          <div className="tab-content">
            <div className="content-grid">
              <GeometryInput />
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <PileCapDiagram />
                <ElevationDiagram />
              </div>
            </div>
          </div>
        )}

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

        {activeTab === 'materials' && (
          <div className="tab-content">
            <div className="content-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <MaterialsInput />
                <DesignInput />
              </div>
              <PileCapDiagram />
            </div>
          </div>
        )}

        {activeTab === 'reinforcement' && (
          <div className="tab-content">
            <div className="content-grid">
              <ReinforcementInput />
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <PileCapDiagram />
                <ElevationDiagram />
              </div>
            </div>
          </div>
        )}

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

        {activeTab === 'diagrams' && (
          <div className="tab-content">
            <PileReactionsDiagram />
            <div style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '40px' }}>
              <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>Punching Shear Analysis</h3>
              <PunchingShearDiagram />
            </div>
            <div style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '40px' }}>
              <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>Flexural Analysis</h3>
              <FlexuralDiagram />
            </div>
            <div style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '40px' }}>
              <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>Column Interaction Diagram</h3>
              <InteractionDiagram />
            </div>
            <div style={{ marginTop: '40px', borderTop: '1px solid #eee', paddingTop: '40px' }}>
              <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>Construction Detail</h3>
              <ConstructionDiagram />
            </div>
          </div>
        )}

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

export default App;