import React, { useState } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { ElevatedPlanDiagram, ElevatedElevationDiagram } from './ElevatedBuildingDiagrams';

interface Props {
    qh: number;
    G: number;
    GCpi: number;
}

export const ElevatedBuildingsSection: React.FC<Props> = ({ qh, G, GCpi }) => {
    const { buildingGeometry, mwfrs } = useCalculatorStore();

    // Inputs (Local state as these are specific checks)
    const [hb, setHb] = useState<number>(0); // Height to bottom
    const [csaCol, setCsaCol] = useState<number>(64.0); // Cross sectional area of cols
    const [areaEnc, setAreaEnc] = useState<number>(50.0); // Area of enclosed areas below

    const [projWidthCol1, setProjWidthCol1] = useState<number>(32.0);
    const [projWidthEnc1, setProjWidthEnc1] = useState<number>(40.0);

    const [projWidthCol2, setProjWidthCol2] = useState<number>(30.0);
    const [projWidthEnc2, setProjWidthEnc2] = useState<number>(42.0);

    // Derived
    const L = buildingGeometry.buildingLength;
    const B = buildingGeometry.leastWidth;
    const h = mwfrs.userRidgeHeight > 0 ? mwfrs.userRidgeHeight : buildingGeometry.meanRoofHeight;
    const z = hb + 6.0; // Assume z is strictly related to hb for display

    // Limitation 1 Calculations
    const areaAbove = L * B;
    const totalCsaBelow = csaCol + areaEnc;
    const areaRatio = areaAbove > 0 ? (totalCsaBelow / areaAbove) : 0;

    // Limitation 2 Calculations
    const totalWidth1 = projWidthCol1 + projWidthEnc1;
    const totalWidth2 = projWidthCol2 + projWidthEnc2;

    const widthRatio1 = B > 0 ? totalWidth1 / B : 0;
    const widthRatio2 = L > 0 ? totalWidth2 / L : 0;

    // Checks
    // L/B Ratios:
    const lb1 = B / L; // Direction 1 (Normal)
    const lb2 = L / B; // Direction 2 (Parallel)

    const lim2_RatioCheck1 = widthRatio1 < 0.75;
    const lim2_RatioCheck2 = widthRatio2 < 0.75;
    const lim2_Pass = lim2_RatioCheck1 && lim2_RatioCheck2;

    // Vertical Pressures Logic
    const zones = [
        { label: "Downward pressure: 0 to hb/2*", cp: -0.90 },
        { label: "hb/2 to hb*", cp: -0.90 },
        { label: "hb to 2hb*", cp: -0.50 },
        { label: "> 2hb*", cp: -0.30 },
        { label: "Upward or min wind pressure", cp: -0.18 }
    ];

    const qi = qh; // Assuming qi = qh for this context
    const calculateRow = (cp: number) => {
        const ext = qh * G * cp;
        // w/ +qiGCpi => External - (+Internal)
        const netPlus = ext - (qi * Math.abs(GCpi));
        // w/ -qiGCpi => External - (-Internal) => External + Internal
        const netMinus = ext + (qi * Math.abs(GCpi));

        return {
            cp,
            ext: parseFloat(ext.toFixed(1)),
            netPlus: parseFloat(netPlus.toFixed(1)),
            netMinus: parseFloat(netMinus.toFixed(1))
        };
    };

    if (hb === 0) {
        return (
            <div className="card" style={{ marginTop: '20px', background: '#e0f7fa' }}>
                <div className="report-section-title" style={{ borderBottom: '1px solid #aaa' }}>Elevated Buildings</div>

                <div style={{ padding: '15px' }}>
                    <div className="flex-row gap-md" style={{ alignItems: 'center', marginBottom: '15px' }}>
                        <label style={{ fontWeight: 'bold' }}>h = {h.toFixed(1)} ft</label>
                        <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                            <label>hb =</label>
                            <input
                                type="number"
                                className="input-field"
                                value={hb}
                                onChange={(e) => setHb(parseFloat(e.target.value) || 0)}
                                style={{ width: '60px' }}
                            />
                            <span>ft</span>
                        </div>
                    </div>

                    <div style={{ marginBottom: '10px', fontSize: '1.1em', fontWeight: 'bold', color: 'blue', textAlign: 'center' }}>
                        hb = 0, therefore building is not an elevated building
                    </div>

                    <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', justifyContent: 'center' }}>
                        <div>
                            <ElevatedPlanDiagram />
                        </div>
                        <div>
                            <ElevatedElevationDiagram />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="card" style={{ marginTop: '20px', background: '#e0f7fa', fontSize: '0.9em' }}>
            <div className="report-section-title" style={{ borderBottom: '1px solid #aaa', marginBottom: '10px' }}>Elevated Buildings</div>

            <div style={{ padding: '10px' }}>
                {/* Inputs Header */}
                <div style={{ display: 'flex', gap: '40px', marginBottom: '20px' }}>
                    <div className="flex-row gap-md" style={{ alignItems: 'center' }}>
                        <label style={{ fontWeight: 'bold' }}>h = {h.toFixed(1)} ft</label>
                    </div>
                    <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                        <label style={{ fontWeight: 'bold' }}>hb =</label>
                        <input
                            type="number"
                            className="input-field"
                            value={hb}
                            onChange={(e) => setHb(parseFloat(e.target.value) || 0)}
                            style={{ width: '60px', padding: '2px' }}
                        />
                        <span>ft</span>
                    </div>
                    <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                        <label style={{ fontWeight: 'bold' }}>z =</label>
                        <span>{z.toFixed(1)} ft</span>
                    </div>
                </div>

                {/* Limitation 1 Section */}
                <div style={{ marginBottom: '20px' }}>
                    <div style={{ textDecoration: 'underline', fontWeight: 'bold', textAlign: 'center', marginBottom: '5px' }}>
                        Horizontal MWFRS wind pressures on objects below hb
                    </div>
                    <div style={{ textDecoration: 'underline', fontWeight: 'bold', textAlign: 'center', marginBottom: '15px' }}>
                        Elevated Building Geometry limitation 1
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div style={{ lineHeight: '1.6' }}>
                            <div>Bldg Length = {L.toFixed(1)} ft</div>
                            <div>Bldg Width = {B.toFixed(1)} ft</div>
                            <div>Area of elevated building above = {areaAbove.toFixed(1)} sf</div>

                            <div className="flex-row gap-sm" style={{ alignItems: 'center' }}>
                                <label>Cross sectional area of all columns below bldg =</label>
                                <input type="number" value={csaCol} onChange={(e) => setCsaCol(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '60px', color: 'red', textAlign: 'right' }} />
                                <span>sf</span>
                            </div>
                            <div className="flex-row gap-sm" style={{ alignItems: 'center' }}>
                                <label>Area of enclosed areas below bldg =</label>
                                <input type="number" value={areaEnc} onChange={(e) => setAreaEnc(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '60px', color: 'red', textAlign: 'right' }} />
                                <span>sf</span>
                            </div>
                            <div style={{ borderTop: '1px solid #ccc' }}>Total cross sectional area below bldg = {totalCsaBelow.toFixed(1)} sf</div>
                        </div>

                        <div style={{ textAlign: 'right', lineHeight: '1.6' }}>
                            <br />
                            <div>Area of below elements / Area of Bldg above = <strong>{(areaRatio * 100).toFixed(1)}%</strong></div>

                            <div style={{ marginTop: '10px' }}>
                                Direction 1 L/B = {lb1.toFixed(2)} &nbsp;&nbsp; Max L/B = 0.500 {(lb1 <= 0.5) ? 'OK' : 'NG'}
                            </div>
                            <div>
                                Direction 2 L/B = {lb2.toFixed(2)} &nbsp;&nbsp; Max L/B = 0.500 {(lb2 <= 0.5) ? 'OK' : 'OK'}
                            </div>

                            <div style={{ color: 'blue', fontWeight: 'bold', marginTop: '5px' }}>
                                Meets geometry Limitation No 1 for both directions
                            </div>
                        </div>
                    </div>
                </div>

                {/* Limitation 2 Section */}
                <div style={{ marginBottom: '20px' }}>
                    <div style={{ textDecoration: 'underline', fontWeight: 'bold', textAlign: 'center', marginBottom: '15px' }}>
                        Elevated Building Geometry limitation 2
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px' }}>
                        {/* Dir 1 */}
                        <div>
                            <div style={{ textDecoration: 'underline', textAlign: 'center', marginBottom: '5px' }}>Direction 1</div>
                            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                                <label>Projected width of all columns facing direction 1 =</label>
                                <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                                    <input type="number" value={projWidthCol1} onChange={(e) => setProjWidthCol1(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '50px', color: 'red' }} />
                                    <span>ft</span>
                                </div>
                            </div>
                            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                                <label>Projected L2 width of enclosed areas below bldg =</label>
                                <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                                    <input type="number" value={projWidthEnc1} onChange={(e) => setProjWidthEnc1(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '50px', color: 'red' }} />
                                    <span>ft</span>
                                </div>
                            </div>
                            <div style={{ textAlign: 'right', borderTop: '1px solid #ccc', marginTop: '2px' }}>
                                Total projected width below bldg (width) = {totalWidth1.toFixed(1)} ft
                            </div>
                            <div style={{ textAlign: 'right', marginTop: '5px' }}>
                                Projected area ratio = {(widthRatio1 * 100).toFixed(1)}% {lim2_RatioCheck1 ? '. 75% OK' : '> 75% NG'}
                            </div>
                        </div>

                        {/* Dir 2 */}
                        <div>
                            <div style={{ textDecoration: 'underline', textAlign: 'center', marginBottom: '5px' }}>Direction 2</div>
                            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                                <label>Projected width of all columns facing direction 2 =</label>
                                <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                                    <input type="number" value={projWidthCol2} onChange={(e) => setProjWidthCol2(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '50px', color: 'red' }} />
                                    <span>ft</span>
                                </div>
                            </div>
                            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
                                <label>Projected L1 width of enclosed areas =</label>
                                <div className="flex-row gap-xs" style={{ alignItems: 'center' }}>
                                    <input type="number" value={projWidthEnc2} onChange={(e) => setProjWidthEnc2(parseFloat(e.target.value) || 0)} className="input-field" style={{ width: '50px', color: 'red' }} />
                                    <span>ft</span>
                                </div>
                            </div>
                            <div style={{ textAlign: 'right', borderTop: '1px solid #ccc', marginTop: '2px' }}>
                                Total projected width below bldg (width) = {totalWidth2.toFixed(1)} ft
                            </div>
                            <div style={{ textAlign: 'right', marginTop: '5px' }}>
                                Projected area ratio = {(widthRatio2 * 100).toFixed(1)}% {lim2_RatioCheck2 ? '. 75% OK' : '> 75% NG'}
                            </div>
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', color: lim2_Pass ? 'blue' : 'blue', marginTop: '10px' }}>
                        {lim2_Pass
                            ? "Meets geometry Limitation No 2 for both directions"
                            : "Doesn't meet geometry Limitation No 2 for either direction"}
                    </div>
                </div>

                <div style={{ marginTop: '20px', color: 'blue', textAlign: 'center', fontSize: '1.2em', fontWeight: 'bold' }}>
                    hb = {hb} ft, therefore building {lim2_Pass ? "is" : "is"} an elevated building
                </div>

                {/* Vertical Pressures Table */}
                <div style={{ marginTop: '20px', borderTop: '2px solid #ccc', paddingTop: '10px' }}>
                    <div style={{ textDecoration: 'underline', fontWeight: 'bold' }}>
                        Vertical MWFRS wind pressures on bottom surface of the elevated building
                    </div>
                    <div style={{ marginTop: '5px' }}>Base pressure (Kd qz) = {(0.85 * qh).toFixed(1)} psf</div>

                    <div className="report-section-title" style={{ marginTop: '10px' }}>Ultimate Vertical MWFRS Wind Surface Pressures (psf) at horizontal bottom surface</div>

                    <table className="analysis-table" style={{ width: '100%', fontSize: '0.9em', border: '2px solid black', marginTop: '5px' }}>
                        <thead>
                            <tr style={{ background: '#f0f0f0' }}>
                                <th style={{ borderRight: '1px solid #000' }}></th>
                                <th colSpan={4} style={{ borderBottom: '1px solid #000', borderRight: '1px solid #000' }}>Wind Normal to Ridge</th>
                                <th colSpan={4} style={{ borderBottom: '1px solid #000' }}>Wind Parallel to Ridge</th>
                            </tr>
                            <tr style={{ background: '#e0e0e0' }}>
                                <th style={{ borderRight: '1px solid #000' }}></th>
                                {/* Normal Cols */}
                                <th colSpan={4} style={{ borderRight: '1px solid #000', fontSize: '0.8em' }}>
                                    L/B = {(B / L).toFixed(2)} &nbsp;&nbsp; hb/L = {B > 0 ? (hb / B).toFixed(2) : '0.00'}
                                </th>
                                {/* Parallel Cols */}
                                <th colSpan={4} style={{ fontSize: '0.8em' }}>
                                    L/B = {(L / B).toFixed(2)} &nbsp;&nbsp; hb/L = {L > 0 ? (hb / L).toFixed(2) : '0.00'}
                                </th>
                            </tr>
                            <tr style={{ background: '#f9f9f9' }}>
                                <th style={{ borderRight: '1px solid #000', textAlign: 'right' }}>Dist.*</th>
                                <th>Cp</th>
                                <th>q_h GCp</th>
                                <th>w/ +qiGCpi</th>
                                <th style={{ borderRight: '1px solid #000' }}>w/ -qiGCpi</th>

                                <th>Dist.*</th>
                                <th>Cp</th>
                                <th>q_h GCp</th>
                                <th>w/ +qiGCpi</th>
                                <th>w/ -qiGCpi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {zones.map((zone, i) => {
                                const res = calculateRow(zone.cp);
                                return (
                                    <tr key={i}>
                                        <td style={{ textAlign: 'right', borderRight: '1px solid #000', fontWeight: 'bold', whiteSpace: 'nowrap' }}>{zone.label}</td>

                                        {/* Normal */}
                                        <td>{res.cp.toFixed(2)}</td>
                                        <td>{res.ext.toFixed(1)}</td>
                                        <td>{res.netPlus.toFixed(1)}</td>
                                        <td style={{ borderRight: '1px solid #000' }}>{res.netMinus.toFixed(1)}</td>

                                        {/* Parallel (Identical logic) */}
                                        <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>{zone.label.replace('Downward pressure: ', '')}</td>
                                        <td>{res.cp.toFixed(2)}</td>
                                        <td>{res.ext.toFixed(1)}</td>
                                        <td>{res.netPlus.toFixed(1)}</td>
                                        <td>{res.netMinus.toFixed(1)}</td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    );
};