import React, { useMemo } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import { calculateMwfrsPressures } from '../../../utils/mwfrsLogic';
import type { MwfrsInputs } from '../../../utils/mwfrsLogic';
import { PressureSummaryTable } from '../mwfrs/PressureSummaryTable';
import { ParapetTable } from '../mwfrs/ParapetTable';
import { WallPressureTable } from '../mwfrs/WallPressureTable';
import { MwfrsDirectionalDiagram } from '../mwfrs/MwfrsDirectionalDiagram';
import { WindForcesTable } from '../mwfrs/WindForcesTable';
import { ElevatedBuildingsSection } from '../mwfrs/ElevatedBuildingsSection';


export const MwfrsSheet: React.FC = () => {
    const { wind, buildingGeometry, mwfrs, setMwfrs } = useCalculatorStore();

    // Derived values
    const h = mwfrs.userRidgeHeight > 0 ? mwfrs.userRidgeHeight : buildingGeometry.meanRoofHeight;

    // Assume Store 'buildingLength' is dim parallel to ridge, 'leastWidth' is normal.
    const dimParallel = buildingGeometry.buildingLength;
    const dimNormal = buildingGeometry.leastWidth;

    // Calculate qh
    const qh = calculateWindPressure({
        speed: wind.speed,
        exposure: wind.exposure,
        height: h,
        kzt: wind.topography.factor,
        kd: wind.directionality,
        ke: wind.groundElevationFactor,
        g: -1 // unused
    });

    const G = wind.gust.factor;
    const GCpi = wind.internalPressure;

    // Toggle Orientation
    const toggleOrientation = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setMwfrs({ ridgeOrientation: e.target.value as any });
    };

    // Case 1: Wind Normal to Ridge
    const resultsNormal = useMemo(() => {
        const inputs: MwfrsInputs = {
            direction: 'Normal', // Normal to Ridge
            L: dimNormal,
            B: dimParallel,
            h,
            roofAngle: 0, // Placeholder
            q_h: qh,
            G,
            GCpi,
            windDirection: 'Normal to Ridge'
        };
        return calculateMwfrsPressures(inputs);
    }, [dimNormal, dimParallel, h, qh, G, GCpi]);

    // Case 2: Wind Parallel to Ridge
    const resultsParallel = useMemo(() => {
        const inputs: MwfrsInputs = {
            direction: 'Parallel', // Parallel to Ridge
            L: dimParallel,
            B: dimNormal,
            h,
            roofAngle: 0,
            q_h: qh,
            G,
            GCpi,
            windDirection: 'Parallel to Ridge'
        };
        return calculateMwfrsPressures(inputs);
    }, [dimNormal, dimParallel, h, qh, G, GCpi]);



    return (
        <div className="sheet-content fade-in">
            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                <h2>Wind Loads - MWFRS all h (Except for Open Buildings)</h2>
                <div className="flex-row gap-sm" style={{ fontSize: '0.9em', color: '#666' }}>
                    <div>Job No: {useCalculatorStore.getState().general.jobNo}</div>
                    <div>By: {useCalculatorStore.getState().general.calculatedBy}</div>
                </div>
            </div>

            {/* Header Data Block */}
            <div className="card" style={{ padding: '15px', background: '#e3f2fd', border: '1px solid #90caf9', marginBottom: '20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>

                    {/* Column 1: Velocities & Factors */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                        <div>Base pressure (qh) = <strong>{qh.toFixed(1)} psf</strong></div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>(Kd qh) = <strong>{(0.85 * qh).toFixed(1)} psf</strong></span>
                        </div>
                        <div>Roof Angle (&theta;) = <strong>0.4 deg</strong></div>
                        <div>Roof tributary area: <span className="highlight-green">605 sf</span></div>
                    </div>

                    {/* Column 2: Dimensions */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                        <div>Kh = <strong>{wind.exposure === 'C' ? '0.94' : 'N/A'} (approx)</strong></div>
                        <div>Bldg dim parallel to ridge = <strong>{dimParallel.toFixed(1)} ft</strong></div>
                        <div>Bldg dim normal to ridge = <strong>{dimNormal.toFixed(1)} ft</strong></div>
                        <div>h = <strong>{h.toFixed(1)} ft</strong></div>
                        <div>ridge ht = <strong className="highlight-green">{h.toFixed(1)} ft</strong></div>
                    </div>

                    {/* Column 3: Factors */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                        <div>GCpi = +/- {GCpi}</div>
                        <div>G = {G}</div>
                        <div>qi = qh</div>
                    </div>
                </div>
            </div>

            <div style={{ display: 'flex', gap: '20px' }}>
                {/* Left Sidebar: Parapet / Wall Pressures */}
                <div style={{ width: '300px', flexShrink: 0 }}>
                    <div className="card" style={{ marginBottom: '15px', padding: '10px' }}>
                        <ParapetTable qh={qh} />
                    </div>
                    <div className="card" style={{ padding: '10px' }}>
                        <WallPressureTable qh={qh} h={h} G={G} GCpi={GCpi} />
                    </div>
                </div>

                {/* Main Content */}
                <div style={{ flex: 1 }} className="report-section">

                    {/* Upper Section: Pressures & Diagram */}
                    <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', marginBottom: '30px' }}>

                        {/* Summary Tables */}
                        <div style={{ flex: 1 }}>
                            <div className="report-section-title">Ultimate Wind Surface Pressures (psf)</div>
                            <div style={{ display: 'flex', gap: '20px', flexDirection: 'column' }}>
                                <div style={{ display: 'flex', gap: '10px' }}>
                                    <div style={{ flex: 1 }}>
                                        <PressureSummaryTable
                                            title="Wind Normal to Ridge"
                                            description={`L/B = ${(dimNormal / dimParallel).toFixed(2)}  h/L = ${(h / dimNormal).toFixed(2)}`}
                                            data={resultsNormal}
                                        />
                                    </div>
                                    <div style={{ flex: 1 }}>
                                        <PressureSummaryTable
                                            title="Wind Parallel to Ridge"
                                            description={`L/B = ${(dimParallel / dimNormal).toFixed(2)}  h/L = ${(h / dimParallel).toFixed(2)}`}
                                            data={resultsParallel}
                                        />
                                    </div>
                                </div>
                                {/* Wind Overhangs Note */}
                                <div style={{ marginTop: '5px', fontSize: '0.9em', color: '#333' }}>
                                    <strong>Windward roof overhangs :</strong> 15.3 psf (upward : add to qhGCp windward roof pressure)
                                </div>
                            </div>
                        </div>

                        {/* Directional Diagram Sidebar */}
                        <div style={{ width: '240px', flexShrink: 0 }}>
                            <MwfrsDirectionalDiagram />
                        </div>
                    </div>

                    {/* Wind Forces Section */}
                    <div>
                        <WindForcesTable />
                    </div>

                    {/* Elevated Buildings Section */}
                    <div>
                        <ElevatedBuildingsSection qh={qh} G={G} GCpi={GCpi} />
                    </div>

                </div>
            </div>

            <div className="card" style={{ marginTop: '20px' }}>
                <div className="flex-col gap-xs">
                    <label style={{ fontSize: '0.9em', color: '#555' }}>Ridge Orientation:</label>
                    <select className="input-field" value={mwfrs.ridgeOrientation} onChange={toggleOrientation}>
                        <option value="Parallel to L">Parallel to L</option>
                        <option value="Normal to L">Normal to L</option>
                    </select>
                </div>
            </div>
        </div>
    );
};