import React, { useState } from 'react';
import { LeewardDriftDiagram, SlidingSnowDiagram } from '../diagrams/SnowDriftDiagrams2';

export const SnowLoadsSheet2: React.FC = () => {
    // Inputs: High Roof vs Lower Roof
    const [highRoof, setHighRoof] = useState({
        slopeDeg: 0.4,
        W: 11.9,
        L: 50.4,
        roofType: 'Hip and gable w/ trussed systems',
    });
    const [lowRoof, setLowRoof] = useState({
        slopeDeg: 2.4, // 0.5/12
        W: 78.0,
        L: 121.0,
        stepH: 5.0, // Projection height (roof step) h
        separation: 0.0,
        roofType: 'Hip and gable w/ trussed systems',
    });

    // Shared / Other inputs
    const [common, setCommon] = useState({
        Pg: 21.0,
        risk: 'III',
        Ce: 1.0,
        Ct: 1.188,
        snowFactor: 1.0,
        R: 30,
        W2: 0.35,
    });

    // Constants
    const Is = common.risk === 'I' ? 0.8 : common.risk === 'II' ? 1.0 : common.risk === 'III' ? 1.1 : 1.2;
    const snowDensity = Math.min(30, 0.13 * common.Pg + 14);

    // --- High Roof Calculations ---
    const Pf_High = 0.7 * common.Ce * common.Ct * Is * common.Pg;
    const Cs_High = 1.0; // Simplified
    const Ps_High = Cs_High * Pf_High;
    const Pm_High = common.Pg <= 20 ? Is * common.Pg : Is * 20;
    const Design_High = Math.max(Ps_High, Pm_High); // Simplified

    // --- Lower Roof Calculations ---
    const Pf_Low = 0.7 * common.Ce * common.Ct * Is * common.Pg;
    const Cs_Low = 1.0; // Simplified
    const Ps_Low = Cs_Low * Pf_Low;
    const Pm_Low = common.Pg <= 20 ? Is * common.Pg : Is * 20;
    const Design_Low = Math.max(Ps_Low, Pm_Low); // Simplified


    // --- Drift Calculations ---
    // Helper
    const calculateDrift = (lu: number, h: number, pf: number) => {
        if (lu <= 0) return { hd: 0, w: 0, pd: 0, hc: 0, hb: 0, driftReq: false, msg: '' };

        const hb = pf / snowDensity;
        // drift height hd
        const hd_calc = 0.43 * Math.pow(lu, 1 / 3) * Math.pow(common.Pg + 10, 0.25) - 1.5;
        const hd = Math.max(0, hd_calc);

        // hc = h - hb
        const hc = h - hb;

        // Ratio check
        const ratio = hb > 0 ? hc / hb : 100;

        let driftReq = true;
        let msg = '';
        if (ratio < 0.2) {
            driftReq = false;
            msg = `hc/hb < 0.2 (${ratio.toFixed(1)})`;
        }
        if (hc <= 0) {
            driftReq = false;
            msg = 'hc <= 0';
        }

        const design_hd = Math.min(hd, hc);
        const w = 4 * design_hd;
        const pd = snowDensity * design_hd;

        return { hd: design_hd, w, pd, hc, hb, driftReq, msg, ratio };
    };

    const [driftInputs, setDriftInputs] = useState({
        lu_leeward: 123.0,
        lu_windward: 78.0,
    });

    const leewardResults = calculateDrift(driftInputs.lu_leeward, lowRoof.stepH, Pf_Low);

    // Correcting windward calc with 0.75 factor
    const calculateWindwardDrift = (lu: number, h: number, pf: number) => {
        const res = calculateDrift(lu, h, pf);
        const hd_windward = res.hd * 0.75; // Windward factor
        // Re-check constraints with windward hd
        const design_hd = Math.min(hd_windward, res.hc);
        const w = 4 * design_hd;
        const pd = snowDensity * design_hd;
        return { ...res, hd: design_hd, w, pd };
    };

    const windwardFinal = calculateWindwardDrift(driftInputs.lu_windward, lowRoof.stepH, Pf_Low);


    // --- Sliding Snow ---
    const slopeThreshold = 1.19; // approx 1/4 on 12
    const slidingReq = highRoof.slopeDeg > slopeThreshold;
    const slidingLoad = slidingReq ? 0.4 * Pf_High * highRoof.W : 0;
    const slidingPressure = slidingReq ? slidingLoad / 15 : 0;


    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>Snow Loads - from adjacent building or roof: ASCE 7-22</h2>
                <div style={{ textAlign: 'right', fontSize: '0.9em' }}>
                    <div style={{ fontWeight: 'bold' }}>Ultimate Snow Forces</div>
                </div>
            </div>

            {/* Inputs Grid - Two Columns */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
                {/* High Roof */}
                <div style={{ background: '#e0f7fa', padding: '10px' }}>
                    <div style={{ fontWeight: 'bold', textDecoration: 'underline', marginBottom: '5px' }}>Higher Roof</div>
                    <div>Roof slope = <input type="number" value={highRoof.slopeDeg} onChange={e => setHighRoof({ ...highRoof, slopeDeg: parseFloat(e.target.value) })} style={{ width: '50px' }} /> deg</div>
                    <div>Horiz. eave to ridge (W) = <input type="number" value={highRoof.W} onChange={e => setHighRoof({ ...highRoof, W: parseFloat(e.target.value) })} style={{ width: '50px' }} /> ft</div>
                    <div>Roof length (L) = <input type="number" value={highRoof.L} onChange={e => setHighRoof({ ...highRoof, L: parseFloat(e.target.value) })} style={{ width: '50px' }} /> ft</div>

                    <div style={{ marginTop: '10px' }}>Projection height (h) = <input type="number" value={lowRoof.stepH} onChange={e => setLowRoof({ ...lowRoof, stepH: parseFloat(e.target.value) })} style={{ width: '50px' }} /> ft</div>

                    <div style={{ marginTop: '10px' }}>Ground Snow Load Pg = {common.Pg} psf</div>
                    <div>Pf = {Pf_High.toFixed(1)} psf</div>
                    <div>Uniform Design Load = <strong>{Design_High.toFixed(1)} psf</strong></div>
                </div>

                {/* Lower Roof */}
                <div style={{ background: '#f5f5f5', padding: '10px' }}>
                    <div style={{ fontWeight: 'bold', textDecoration: 'underline', marginBottom: '5px' }}>Lower Roof</div>
                    <div>Roof slope = <input type="number" value={lowRoof.slopeDeg} onChange={e => setLowRoof({ ...lowRoof, slopeDeg: parseFloat(e.target.value) })} style={{ width: '50px' }} /> deg</div>
                    <div>Lower roof length (L) = <input type="number" value={lowRoof.L} onChange={e => setLowRoof({ ...lowRoof, L: parseFloat(e.target.value) })} style={{ width: '50px' }} /> ft</div>
                    <div>Building separation s = <input type="number" value={lowRoof.separation} onChange={e => setLowRoof({ ...lowRoof, separation: parseFloat(e.target.value) })} style={{ width: '50px' }} /> ft</div>

                    <div style={{ marginTop: '25px' }}>Pg = <input type="number" value={common.Pg} onChange={e => setCommon({ ...common, Pg: parseFloat(e.target.value) })} style={{ width: '50px', color: 'red' }} /> psf</div>
                    <div>Pf = {Pf_Low.toFixed(1)} psf</div>
                    <div>Uniform Design Load = <strong>{Design_Low.toFixed(1)} psf</strong></div>
                </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                {/* Leeward Drift */}
                <div style={{ border: '1px solid #ccc', padding: '10px' }}>
                    <h3>Leeward Snow Drifts - from adjacent higher roof</h3>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Upper roof length lu = <input type="number" value={driftInputs.lu_leeward} onChange={e => setDriftInputs({ ...driftInputs, lu_leeward: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /> ft</div>
                    </div>

                    <div>Snow density = {snowDensity.toFixed(1)} pcf</div>
                    <div>Balanced snow hb = {leewardResults.hb.toFixed(2)} ft</div>
                    <div>Clear height hc = {leewardResults.hc.toFixed(2)} ft</div>

                    <div style={{ fontWeight: 'bold', margin: '5px 0' }}>
                        {leewardResults.driftReq ? "Therefore, design for drift" : leewardResults.msg}
                    </div>

                    <div>Drift height hd = {leewardResults.hd.toFixed(2)} ft</div>
                    <div>Drift width w = {leewardResults.w.toFixed(2)} ft</div>
                    <div>Surcharge load pd = <strong>{leewardResults.pd.toFixed(1)} psf</strong></div>
                    <div>Balanced (Low) = {Pf_Low.toFixed(1)} psf</div>
                    <div style={{ borderTop: '1px solid black' }}>Total = {(leewardResults.pd + Pf_Low).toFixed(1)} psf</div>

                    <div style={{ marginTop: '10px' }}>
                        <LeewardDriftDiagram />
                    </div>
                </div>

                {/* Windward Drift */}
                <div style={{ border: '1px solid #ccc', padding: '10px' }}>
                    <h3>Windward Snow Drifts - from low roof against high roof</h3>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Lower roof length lu = <input type="number" value={driftInputs.lu_windward} onChange={e => setDriftInputs({ ...driftInputs, lu_windward: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /> ft</div>
                    </div>

                    <div>Drift height hd = {windwardFinal.hd.toFixed(2)} ft</div>
                    <div>Drift width w = {windwardFinal.w.toFixed(2)} ft</div>
                    <div>Surcharge load pd = <strong>{windwardFinal.pd.toFixed(1)} psf</strong></div>
                    <div>Balanced (Low) = {Pf_Low.toFixed(1)} psf</div>
                    <div style={{ borderTop: '1px solid black' }}>Total = {(windwardFinal.pd + Pf_Low).toFixed(1)} psf</div>

                    <div style={{ marginTop: '20px', borderTop: '2px solid black', paddingTop: '10px' }}>
                        <h3>Sliding Snow - onto lower roof</h3>
                        <div>Sliding snow = {slidingLoad.toFixed(1)} plf (Total)</div>
                        <div>Distributed over 15 feet = {slidingPressure.toFixed(1)} psf</div>
                        <div style={{ fontSize: '0.9em', color: 'blue', marginTop: '5px' }}>
                            {slidingReq ? "Sliding snow required" : "Sliding snow not required since upper roof slope is 1/4 in 12 or less"}
                        </div>
                        <SlidingSnowDiagram />
                    </div>
                </div>
            </div>

        </div>
    );
};