import React, { useState } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import openBuildingZones from '../../../assets/open_building_zones.png';
import openBuildingZonesPlan from '../../../assets/open_building_zones_plan.png';

export const OpenBuildingsSheet: React.FC = () => {
    const { wind, buildingGeometry } = useCalculatorStore();
    const [roofType, setRoofType] = useState<'Pitched Free Roofs' | 'Monoslope Free Roofs' | 'Troughed Free Roofs'>('Pitched Free Roofs');
    const [windFlow, setWindFlow] = useState<'Clear' | 'Obstructed'>('Clear');

    // Geometry
    const h = buildingGeometry.meanRoofHeight;
    const qh_calc = calculateWindPressure({
        speed: wind.speed,
        exposure: wind.exposure,
        height: h,
        kzt: wind.topography.factor,
        kd: wind.directionality,
        ke: wind.groundElevationFactor,
        g: -1
    });

    const Kd = 0.85;
    const q_design = qh_calc * Kd;

    return (
        <div className="sheet-content fade-in">
            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px', borderBottom: '2px solid black', paddingBottom: '10px' }}>
                <h2>Wind Loads - Open Buildings</h2>
                <div style={{ textAlign: 'right', fontSize: '0.9em' }}>
                    <div style={{ fontWeight: 'bold' }}>Ultimate Wind Pressures</div>
                </div>
            </div>

            <div className="card" style={{ padding: '15px', background: '#e0f7fa', marginBottom: '20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
                    <div>
                        <div style={{ marginBottom: '5px' }}>
                            <label style={{ marginRight: '10px' }}>Type of roof = </label>
                            <select value={roofType} onChange={(e) => setRoofType(e.target.value as any)} style={{ padding: '2px' }}>
                                <option>Pitched Free Roofs</option>
                                <option>Monoslope Free Roofs</option>
                                <option>Troughed Free Roofs</option>
                            </select>
                        </div>
                        <div>
                            <label style={{ marginRight: '10px' }}>Wind Flow = </label>
                            <select value={windFlow} onChange={(e) => setWindFlow(e.target.value as any)} style={{ padding: '2px' }}>
                                <option>Clear</option>
                                <option>Obstructed</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {/* MWFRS Section */}
            <div style={{ marginBottom: '30px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid #ccc', marginBottom: '10px' }}>
                    <h3>Main Wind Force Resisting System</h3>
                    <div style={{ textAlign: 'right', fontSize: '0.9em' }}>
                        <div>Base pressure (qh) = {qh_calc.toFixed(1)} psf</div>
                        <div>(Kd qh) = <strong>{q_design.toFixed(1)} psf</strong></div>
                        <div>Kz = Kh = {(qh_calc / (0.00256 * 1.0 * 1.0 * Math.pow(wind.speed, 2))).toFixed(3)}</div>
                    </div>
                </div>

                {/* Normal to Ridge Table */}
                <div style={{ marginBottom: '20px' }}>
                    <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Roof pressures - Wind Normal to Ridge</div>
                    <table className="analysis-table" style={{ width: '100%' }}>
                        <thead>
                            <tr>
                                <th rowSpan={2}>Wind Flow</th>
                                <th rowSpan={2}>Load Case</th>
                                <th rowSpan={2}></th>
                                <th colSpan={2}>Wind Direction &gamma; = 0 & 180 deg</th>
                            </tr>
                            <tr>
                                <th>Cnw</th>
                                <th>Cnl</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowSpan={4} style={{ verticalAlign: 'middle' }}>{windFlow} Wind Flow</td>
                                <td rowSpan={2} style={{ verticalAlign: 'middle' }}>A</td>
                                <td>Cn =</td>
                                <td>1.20</td><td>0.30</td>
                            </tr>
                            <tr>
                                <td>p =</td>
                                <td>{(q_design * 1.2 * wind.gust.factor).toFixed(1)} psf</td>
                                <td>{(q_design * 0.3 * wind.gust.factor).toFixed(1)} psf</td>
                            </tr>
                            <tr>
                                <td rowSpan={2} style={{ verticalAlign: 'middle' }}>B</td>
                                <td>Cn =</td>
                                <td>-1.10</td><td>-0.10</td>
                            </tr>
                            <tr>
                                <td>p =</td>
                                <td>{(q_design * -1.1 * wind.gust.factor).toFixed(1)} psf</td>
                                <td>{(q_design * -0.1 * wind.gust.factor).toFixed(1)} psf</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Open Building Zones Diagram */}
            <div className="card" style={{ marginTop: '30px', padding: '20px', background: '#fff', textAlign: 'center' }}>
                <div className="report-section-title" style={{ marginBottom: '15px', textDecoration: 'underline' }}>
                    MWFRS Wind Load Cases
                </div>
                <img src={openBuildingZones} alt="MWFRS Wind Load Cases" style={{ maxWidth: '100%', border: '1px solid #ddd', marginBottom: '30px' }} />

                <div className="report-section-title" style={{ marginBottom: '15px', textDecoration: 'underline' }}>
                    Wind Pressure Zones (Plan View)
                </div>
                <img src={openBuildingZonesPlan} alt="Wind Pressure Zones (Plan View)" style={{ maxWidth: '100%', border: '1px solid #ddd' }} />
            </div>
        </div>
    );
};