import React, { useState } from 'react';

import { SnowDriftDiagram } from '../diagrams/SnowDriftDiagram';

export const SnowLoadsSheet: React.FC = () => {
    // Basic Inputs
    const [inputs, setInputs] = useState({
        slopeDeg: 0.4,
        width: 11.9,
        length: 50.4,
        roofType: 'Hip and gable w/ trussed systems',
        Pg: 21.0,
        risk: 'III',
        snowFactor: 1.0,
        R: 35,
        Ct: 1.1, // Thermal factor input (1.0, 1.1, 1.2, etc.)
        Ce: 1.0, // Exposure factor input
        userInputCs: 1.0, // Override
        userInputPf: 0, // Not used directly if we calc it
        rainSurcharge: false,
    });

    // Unbalanced Inputs
    const [unbalanced, setUnbalanced] = useState({
        W2: 0.35,
        required: false,
    });

    // Drift Inputs 1
    const [drift1, setDrift1] = useState({
        lu: 78.0,
        h: 5.0,
        lp: 121.0,
    });

    // Drift Inputs 2
    const [drift2, setDrift2] = useState({
        lu: 0.0,
        h: 0.0,
        lp: 0.0,
    });

    // Constants / Derived
    const Is = inputs.risk === 'I' ? 0.8 : inputs.risk === 'II' ? 1.0 : inputs.risk === 'III' ? 1.1 : 1.2;
    const snowDensity = Math.min(30, 0.13 * inputs.Pg + 14); // Gamma = 0.13Pg + 14 (ASCE 7-22 approx)

    // Calc Pf
    // Pf = 0.7 * Ce * Ct * Is * Pg
    const Pf = 0.7 * inputs.Ce * inputs.Ct * Is * inputs.Pg;

    // Calc Cs (Slope Factor) - simplified placeholder logic 
    const Cs = inputs.userInputCs;

    // Sloped Roof Load Ps
    const Ps = Cs * Pf;

    // Rain on Snow
    const rainSurchargeLoad = inputs.rainSurcharge ? 5.0 : 0.0;

    // Minimum Snow Load Pm
    // Pg <= 20: Pm = Is * Pg. Pg > 20: Pm = Is * 20.
    const Pm = inputs.Pg <= 20 ? Is * inputs.Pg : Is * 20;

    // Design Snow Load (Uniform)
    const designLoad = Math.max(Ps + rainSurchargeLoad, Pm);


    // --- Drift Calculation Helper ---
    // hd = 0.43 * lu^(1/3) * (pg + 10)^(1/4) - 1.5
    const calculateDrift = (lu: number, h: number, lp: 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(inputs.Pg + 10, 0.25) - 1.5;
        const hd = Math.max(0, hd_calc);

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

        // Check if drift required: hc/hb > 0.2
        const ratio = hb > 0 ? hc / hb : 100; // safe fallback

        let driftReq = true;
        let msg = '';

        if (ratio < 0.2) {
            driftReq = false;
            msg = `hc/hb < 0.2 (${ratio.toFixed(2)})`;
        }
        if (lp < 15 && lp > 0) {
            driftReq = false;
            msg = `lp < 15', drift not req'd`;
        }
        if (hc <= 0) {
            driftReq = false;
            msg = 'hc <= 0';
        }

        // Actual drift height limited by hc
        const design_hd = Math.min(hd, hc);

        // Drift width w = 4 * hd
        const w = 4 * design_hd;

        // Surcharge pd = gamma * hd
        const pd = snowDensity * design_hd;

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

    const d1Results = calculateDrift(drift1.lu, drift1.h, drift1.lp);
    const d2Results = calculateDrift(drift2.lu, drift2.h, drift2.lp);


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

            {/* Main Inputs Grid */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 250px', gap: '20px' }}>
                <div>
                    {/* Row 1: Slope, W, L */}
                    <div style={{ textAlign: 'right', marginBottom: '5px' }}>Roof slope = <input type="number" value={inputs.slopeDeg} onChange={e => setInputs({ ...inputs, slopeDeg: parseFloat(e.target.value) })} style={{ width: '60px' }} /> deg</div>
                    <div style={{ textAlign: 'right', marginBottom: '5px' }}>Horiz. eave to ridge dist (W) = <input type="number" value={inputs.width} onChange={e => setInputs({ ...inputs, width: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                    <div style={{ textAlign: 'right', marginBottom: '10px' }}>Roof length parallel to ridge (L) = <input type="number" value={inputs.length} onChange={e => setInputs({ ...inputs, length: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Type of Roof</div>
                        <select value={inputs.roofType} onChange={e => setInputs({ ...inputs, roofType: e.target.value })} style={{ width: '100%' }}>
                            <option>Hip and gable w/ trussed systems</option>
                            <option>Monoslope</option>
                            <option>Curved</option>
                        </select>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Ground Snow Load Pg =</div>
                        <div style={{ color: 'red' }}><input type="number" value={inputs.Pg} onChange={e => setInputs({ ...inputs, Pg: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /> psf</div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Risk Category =</div>
                        <select value={inputs.risk} onChange={e => setInputs({ ...inputs, risk: e.target.value })} style={{ width: '60px' }}>
                            <option>I</option><option>II</option><option>III</option><option>IV</option>
                        </select>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Roof R value Rroof =</div>
                        <input type="number" value={inputs.R} onChange={e => setInputs({ ...inputs, R: parseFloat(e.target.value) })} style={{ width: '60px', border: '1px solid green' }} />
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Thermal Factor Ct =</div>
                        <div style={{ color: 'red' }}><input type="number" value={inputs.Ct} onChange={e => setInputs({ ...inputs, Ct: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /></div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', alignItems: 'center', marginBottom: '5px' }}>
                        <div>Exposure Factor Ce =</div>
                        <div style={{ color: 'red' }}><input type="number" value={inputs.Ce} onChange={e => setInputs({ ...inputs, Ce: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /></div>
                    </div>

                    <div style={{ borderBottom: '1px solid #ccc', margin: '10px 0' }}></div>

                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Pf = 0.7*Ce*Ct*I*Pg</div>
                        <div>= <strong>{Pf.toFixed(1)} psf</strong></div>
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
                        <div>Sloped-roof Factor Cs =</div>
                        <input type="number" value={inputs.userInputCs} step="0.01" onChange={e => setInputs({ ...inputs, userInputCs: parseFloat(e.target.value) })} style={{ width: '60px', background: '#e0f7fa' }} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Balanced Snow Load =</div>
                        <div><strong>{Ps.toFixed(1)} psf</strong></div>
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '5px' }}>
                        <div>Rain on Snow Surcharge Angle</div>
                        <div style={{ background: '#ccffcc', padding: '0 5px' }}>0.24 deg</div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Rain on Snow Surcharge =</div>
                        <div>{rainSurchargeLoad.toFixed(1)} psf</div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>Minimum Snow Load Pm =</div>
                        <div>{Pm.toFixed(1)} psf</div>
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', background: '#ccffcc', padding: '5px' }}>
                        <div>Uniform Roof Design Snow Load =</div>
                        <div><strong>{designLoad.toFixed(1)} psf</strong></div>
                    </div>
                </div>

                {/* Right Panel - Info */}
                <div style={{ border: '2px solid black', padding: '10px', background: '#ffe0b2' }}>
                    <div style={{ textAlign: 'center', fontWeight: 'bold', marginBottom: '10px' }}>Snow load tools</div>
                    <div style={{ textAlign: 'center', fontSize: '0.9em' }}>
                        <a href="https://asce7hazardtool.online/" target="_blank" rel="noreferrer">asce7hazardtool.online</a><br />
                        <a href="https://hazards.atcouncil.org" target="_blank" rel="noreferrer">hazards.atcouncil.org</a>
                    </div>

                    <div style={{ marginTop: '20px', fontSize: '0.8em', border: '1px solid black', background: 'white' }}>
                        <div style={{ textAlign: 'center', borderBottom: '1px solid black', background: '#eee' }}>Exposure Factor, Ce</div>
                        {/* Placeholder Table */}
                        <div style={{ padding: '5px' }}>Refer to ASCE 7 Table 7.3-1</div>
                    </div>
                </div>
            </div>

            {/* Unbalanced Snow Loads */}
            <div style={{ marginTop: '20px', borderTop: '2px solid black', paddingTop: '10px' }}>
                <h3>Unbalanced Snow Loads - for Hip & Gable roofs only</h3>
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '5px' }}>
                    <div>Winter Wind Parameter W2 = <input type="number" value={unbalanced.W2} onChange={e => setUnbalanced({ ...unbalanced, W2: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} /></div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', background: '#e0f7fa', padding: '5px' }}>
                    <div>Required if slope is between 7 on 12 = 30.26 deg</div>
                    <div>and 2.38 deg</div>
                    <div style={{ fontWeight: 'bold' }}>Unbalanced snow loads {inputs.slopeDeg > 2.38 && inputs.slopeDeg < 30.26 ? "ARE required" : "are not required"}</div>
                </div>

                <div style={{ padding: '10px' }}>
                    <div>Windward snow load = {Ps.toFixed(1)} psf</div>
                    <div>Leeward snow load = {(Ps + d1Results.pd).toFixed(1)} psf (Placeholder calc)</div>
                </div>
            </div>

            {/* Snow Drift 1 */}
            <div style={{ marginTop: '20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                    <div>
                        <h3>Snow Drift 1 - Against roof projections, parapets, etc</h3>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 40px', gap: '5px' }}>
                            <div>Up or downwind fetch lu =</div>
                            <input type="number" value={drift1.lu} onChange={e => setDrift1({ ...drift1, lu: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>

                            <div>Projection height h =</div>
                            <input type="number" value={drift1.h} onChange={e => setDrift1({ ...drift1, h: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>

                            <div>Projection width/length lp =</div>
                            <input type="number" value={drift1.lp} onChange={e => setDrift1({ ...drift1, lp: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>
                        </div>

                        <div style={{ marginTop: '10px' }}>
                            <div>Snow density gamma = {snowDensity.toFixed(1)} pcf</div>
                            <div>Balanced snow height hb = {d1Results.hb.toFixed(2)} ft</div>
                            <div>Drift height hd = {d1Results.hd.toFixed(2)} ft</div>
                            <div>Clear height hc = {d1Results.hc.toFixed(2)} ft</div>

                            <div style={{ fontWeight: 'bold', marginTop: '5px' }}>
                                {d1Results.driftReq ? "Therefore, design for drift" : d1Results.msg || "Drift not required"}
                            </div>

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

                    <div>
                        {/* Diagram for Drift 1 */}
                        <SnowDriftDiagram />
                    </div>
                </div>
            </div>

            {/* Snow Drift 2 */}
            <div style={{ marginTop: '20px', borderTop: '1px solid #ccc', paddingTop: '10px' }}>
                <h3>Snow Drift 2 - Against roof projections, parapets, etc</h3>
                {/* Similar to Drift 1 */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 40px', gap: '5px', maxWidth: '400px' }}>
                    <div>Up or downwind fetch lu =</div>
                    <input type="number" value={drift2.lu} onChange={e => setDrift2({ ...drift2, lu: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>

                    <div>Projection height h =</div>
                    <input type="number" value={drift2.h} onChange={e => setDrift2({ ...drift2, h: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>

                    <div>Projection width/length lp =</div>
                    <input type="number" value={drift2.lp} onChange={e => setDrift2({ ...drift2, lp: parseFloat(e.target.value) })} style={{ color: 'red' }} /> <div>ft</div>
                </div>

                <div style={{ marginTop: '10px' }}>
                    <div>Snow density gamma = {snowDensity.toFixed(1)} pcf</div>
                    <div>Balanced snow height hb = {d2Results.hb.toFixed(2)} ft</div>
                    <div>Drift height hd = {d2Results.hd.toFixed(2)} ft</div>
                    <div>Clear height hc = {d2Results.hc.toFixed(2)} ft</div>

                    <div style={{ fontWeight: 'bold', marginTop: '5px' }}>
                        {d2Results.driftReq ? "Therefore, design for drift" : d2Results.msg || "Drift not required"}
                    </div>

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

        </div>
    );
};