import React, { useState } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import { SolarPanelRoofPlanDiagram, SolarPanelElevationDiagram, WindPressureZonesDiagram } from '../diagrams/SolarPanelDiagrams';

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

    // State for Equipment #1
    const [equip1, setEquip1] = useState({ L: 10.0, B: 5.0, H: 5.0 });
    // State for Equipment #2
    const [equip2, setEquip2] = useState({ L: 3.0, B: 3.0, H: 10.0 });
    // State for Canopy
    const [canopy, setCanopy] = useState({ he: 60.0, hc: 45.0, userInput: 75 });
    // State for Solar Panels
    const [solar, setSolar] = useState({
        hpt: 0.0, d1: 18.4, d2: 1.0, Lp: 6.0, h1: 0.8, h2: 0.8, gap: 0.25, omega: 0.0,
        userInput_parallel: 21,
        userInput_not_parallel_1: 10,
        userInput_not_parallel_2: 1000
    });

    // Derived values
    const h = buildingGeometry.meanRoofHeight;
    const Kd = 0.85; // Fixed per screenshot
    // qh calculation
    const qh_val = calculateWindPressure({
        speed: wind.speed,
        exposure: wind.exposure,
        height: h,
        kzt: wind.topography.factor,
        kd: wind.directionality,
        ke: wind.groundElevationFactor,
        g: -1
    });

    const base_pressure = qh_val * Kd; // "Base pressure (Kd qh)" in screenshot

    // Helper for Equipment Calculation
    const calculateEquipment = (eq: { L: number, B: number, H: number }) => {
        const Ar = eq.L * eq.B;
        const Af_NormalB = eq.B * eq.H;
        const Af_NormalL = eq.L * eq.H;

        const GCr_Vertical = 1.5;
        const GCr_Horizontal = 1.9;

        const F_Vertical = base_pressure * GCr_Vertical * Ar;
        const F_NormalB = base_pressure * GCr_Horizontal * Af_NormalB;
        const F_NormalL = base_pressure * GCr_Horizontal * Af_NormalL;

        return {
            Ar, Af_NormalB, Af_NormalL,
            F_Vertical, F_NormalB, F_NormalL
        };
    };

    const res1 = calculateEquipment(equip1);
    const res2 = calculateEquipment(equip2);

    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 - Rooftop Structures & Canopies</h2>
                <div style={{ textAlign: 'right', fontSize: '0.9em' }}>
                    <div style={{ fontWeight: 'bold' }}>Ultimate Wind Pressures</div>
                </div>
            </div>

            <div style={{ textAlign: 'center', marginBottom: '20px', background: '#e0f7fa', padding: '10px' }}>
                <div>Building (L) = {buildingGeometry.buildingLength.toFixed(1)} ft</div>
                <div>Building (B) = {buildingGeometry.leastWidth.toFixed(1)} ft</div>
                <div>Directionality (Kd) = {Kd}</div>
            </div>

            {/* Equipment #1 */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#f0fdf4' }}>
                <div style={{ borderBottom: '2px solid black', fontWeight: 'bold', marginBottom: '10px' }}>Rooftop Structures & Equipment #1</div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 80px auto', gap: '5px', alignItems: 'center' }}>
                        <div>Equipment length parallel to L = </div>
                        <input type="number" value={equip1.L} onChange={e => setEquip1({ ...equip1, L: parseFloat(e.target.value) })} /> <div>ft</div>
                        <div>Equipment length parallel to B = </div>
                        <input type="number" value={equip1.B} onChange={e => setEquip1({ ...equip1, B: parseFloat(e.target.value) })} /> <div>ft</div>
                        <div>Height of equipment = </div>
                        <input type="number" value={equip1.H} onChange={e => setEquip1({ ...equip1, H: parseFloat(e.target.value) })} /> <div>ft</div>
                    </div>
                    <div style={{ alignSelf: 'center', fontWeight: 'bold' }}>
                        Base pressure (Kd qh) = {base_pressure.toFixed(1)} psf
                    </div>
                </div>

                {/* Results Table-ish Layout */}
                <div style={{ marginTop: '15px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px', textAlign: 'center' }}>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Vertical wind pressure</div>
                        <div>Ar = {res1.Ar.toFixed(1)} sf</div>
                        <div>GCr = 1.500</div>
                        <div>F = <strong>{(res1.F_Vertical / 1000).toFixed(1)} kips</strong> ({res1.F_Vertical.toFixed(0)} lbs)</div>
                        <div>(Pressure: {(base_pressure * 1.5).toFixed(1)} psf)</div>
                    </div>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Wind normal to building B</div>
                        <div>Af = {res1.Af_NormalB.toFixed(1)} sf</div>
                        <div>GCr = 1.90</div>
                        <div>F = <strong>{(res1.F_NormalB / 1000).toFixed(1)} kips</strong></div>
                    </div>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Wind normal to building L</div>
                        <div>Af = {res1.Af_NormalL.toFixed(1)} sf</div>
                        <div>GCr = 1.90</div>
                        <div>F = <strong>{(res1.F_NormalL / 1000).toFixed(1)} kips</strong></div>
                    </div>
                </div>
            </div>

            {/* Equipment #2 */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#f0fdf4' }}>
                <div style={{ borderBottom: '2px solid black', fontWeight: 'bold', marginBottom: '10px' }}>Rooftop Structures & Equipment #2</div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 80px auto', gap: '5px', alignItems: 'center' }}>
                        <div>Equipment length parallel to L = </div>
                        <input type="number" value={equip2.L} onChange={e => setEquip2({ ...equip2, L: parseFloat(e.target.value) })} /> <div>ft</div>
                        <div>Equipment length parallel to B = </div>
                        <input type="number" value={equip2.B} onChange={e => setEquip2({ ...equip2, B: parseFloat(e.target.value) })} /> <div>ft</div>
                        <div>Height of equipment = </div>
                        <input type="number" value={equip2.H} onChange={e => setEquip2({ ...equip2, H: parseFloat(e.target.value) })} /> <div>ft</div>
                    </div>
                    <div style={{ alignSelf: 'center', fontWeight: 'bold' }}>
                        Base pressure (Kd qh) = {base_pressure.toFixed(1)} psf
                    </div>
                </div>
                <div style={{ marginTop: '15px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px', textAlign: 'center' }}>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Vertical wind pressure</div>
                        <div>Ar = {res2.Ar.toFixed(1)} sf</div>
                        <div>GCr = 1.500</div>
                        <div>F = <strong>{(res2.F_Vertical / 1000).toFixed(1)} kips</strong></div>
                    </div>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Wind normal to building B</div>
                        <div>Af = {res2.Af_NormalB.toFixed(1)} sf</div>
                        <div>GCr = 1.90</div>
                        <div>F = <strong>{(res2.F_NormalB / 1000).toFixed(1)} kips</strong></div>
                    </div>
                    <div>
                        <div style={{ textDecoration: 'underline', marginBottom: '5px' }}>Wind normal to building L</div>
                        <div>Af = {res2.Af_NormalL.toFixed(1)} sf</div>
                        <div>GCr = 1.90</div>
                        <div>F = <strong>{(res2.F_NormalL / 1000).toFixed(1)} kips</strong></div>
                    </div>
                </div>
            </div>

            {/* Attached Canopies */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#e0f2fe' }}>
                <div style={{ borderBottom: '2px solid black', fontWeight: 'bold', marginBottom: '10px' }}>Attached Canopies on Buildings : h &le; 60'</div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div>
                        <div>Mean Roof Ht (h) = {h.toFixed(1)} ft</div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                            Mean eave height (he) = <input type="number" value={canopy.he} onChange={e => setCanopy({ ...canopy, he: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                            Mean Canopy height (hc) = <input type="number" value={canopy.hc} onChange={e => setCanopy({ ...canopy, hc: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>hc/he = {(canopy.hc / canopy.he).toFixed(2)}</div>
                    </div>
                    <div style={{ alignSelf: 'center', fontWeight: 'bold' }}>
                        Base pressure (Kd qh) = {base_pressure.toFixed(1)} psf
                    </div>
                </div>

                {/* Canopy Table - Placeholder/Simulated per screenshot */}
                <table className="analysis-table" style={{ marginTop: '20px', width: '100%' }}>
                    <thead>
                        <tr>
                            <th rowSpan={2} style={{ textAlign: 'right' }}>Area</th>
                            <th colSpan={4}>C&C Surface Pressure (psf)</th>
                            <th style={{ background: '#ffcccb' }}>User input</th>
                        </tr>
                        <tr>
                            <th>10 sf</th><th>20 sf</th><th>50 sf</th><th>100 sf</th>
                            <th style={{ background: '#ffcccb' }}><input type="number" value={canopy.userInput} onChange={e => setCanopy({ ...canopy, userInput: parseFloat(e.target.value) })} style={{ width: '50px' }} /> sf</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style={{ fontWeight: 'bold' }}>Separate Individual Surfaces:</td>
                            <td colSpan={5}></td>
                        </tr>
                        <tr>
                            <td>Upper surface negative pressure</td>
                            <td>-25.8</td><td>-23.1</td><td>-19.6</td><td>-16.9</td>
                            <td>-18.0</td>
                        </tr>
                        <tr>
                            <td>Lower surface negative pressure</td>
                            <td>-18.0</td><td>-17.0</td><td>-15.6</td><td>-14.6</td>
                            <td>-15.0</td>
                        </tr>
                        <tr>
                            <td>Upper or Lower surface pos pressure</td>
                            <td>18.0</td><td>16.6</td><td>14.8</td><td>13.5</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td style={{ fontWeight: 'bold' }}>Combined Upper & Lower Surfaces (net):</td>
                            <td colSpan={5}></td>
                        </tr>
                        <tr>
                            <td>Negative pressure</td>
                            <td>-20.2</td><td>-18.5</td><td>-16.3</td><td>-14.6</td>
                            <td>-15.3</td>
                        </tr>
                        <tr>
                            <td>Positive pressure</td>
                            <td>20.2</td><td>18.5</td><td>16.3</td><td>14.6</td>
                            <td>15.3</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {/* Solar Panels Sections */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#fffbeb' }}>
                <div style={{ borderBottom: '2px solid black', fontWeight: 'bold', marginBottom: '10px' }}>Wind Pressures on Solar Panels</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px', fontSize: '0.9em' }}>
                    <div>
                        <div>Roof angle &theta; = {buildingGeometry.roofSlope}</div>
                        <div>Mean Roof Ht h = {h.toFixed(1)} ft</div>
                        <div style={{ marginTop: '5px' }}>
                            Mean parapet height above roof hpt = <input type="number" value={solar.hpt} onChange={e => setSolar({ ...solar, hpt: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>
                            Panel edge to adjacent array or bldg edge d1 = <input type="number" value={solar.d1} onChange={e => setSolar({ ...solar, d1: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>
                            Panel edge to adjacent panel edge d2 = <input type="number" value={solar.d2} onChange={e => setSolar({ ...solar, d2: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                    </div>
                    <div>
                        <div>
                            Panel chord length Lp = <input type="number" value={solar.Lp} onChange={e => setSolar({ ...solar, Lp: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>
                            Dist from roof to lowest panel edge h1 = <input type="number" value={solar.h1} onChange={e => setSolar({ ...solar, h1: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>
                            Dist from roof to highest panel edge h2 = <input type="number" value={solar.h2} onChange={e => setSolar({ ...solar, h2: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft
                        </div>
                        <div>
                            Panel gap (must be 0.25 inches minimum) = <input type="number" value={solar.gap} onChange={e => setSolar({ ...solar, gap: parseFloat(e.target.value) })} style={{ width: '60px' }} /> in
                        </div>
                        <div>
                            Solar panel angle to roof surface &omega; = <input type="number" value={solar.omega} onChange={e => setSolar({ ...solar, omega: parseFloat(e.target.value) })} style={{ width: '60px' }} /> deg
                        </div>
                    </div>
                </div>

                {/* Parallel to Roof Table */}
                <div style={{ marginTop: '20px' }}>
                    <div style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Panels parallel to roof (&omega; &le; 2 deg) all heights & roof slope</div>

                    <div style={{ display: 'flex', gap: '20px', margin: '15px 0', flexWrap: 'wrap', justifyContent: 'center' }}>
                        <SolarPanelRoofPlanDiagram />
                        <SolarPanelElevationDiagram />
                    </div>

                    <div style={{ fontSize: '0.9em', margin: '5px 0' }}>Wind pressure = Kd qh(Cp)(&gamma;E)(&gamma;a)</div>
                    <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                        <thead>
                            <tr>
                                <th rowSpan={2} style={{ verticalAlign: 'middle' }}>Location</th>
                                <th colSpan={4}>Adjustment Factor (&gamma;E)(&gamma;a)</th>
                                <th style={{ background: '#ffcccb' }}>User Input</th>
                            </tr>
                            <tr>
                                <th>&lt;10 sf</th><th>20 sf</th><th>50 sf</th><th>&gt;100 sf</th>
                                <th style={{ background: '#ffcccb' }}><input type="number" value={solar.userInput_parallel} onChange={e => setSolar({ ...solar, userInput_parallel: parseFloat(e.target.value) })} style={{ width: '50px' }} /> sf</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Exposed Panel Uplift</td>
                                <td>1.19</td><td>1.01</td><td>0.78</td><td>0.60</td><td>1.00</td>
                            </tr>
                            <tr>
                                <td>Non exposed Uplift</td>
                                <td>0.79</td><td>0.67</td><td>0.52</td><td>0.40</td><td>0.67</td>
                            </tr>
                            <tr>
                                <td>All panels downward</td>
                                <td>0.79</td><td>0.67</td><td>0.52</td><td>0.40</td><td>0.67</td>
                            </tr>
                        </tbody>
                    </table>
                    <div style={{ fontSize: '0.8em', fontStyle: 'italic', marginTop: '5px' }}>
                        A panel is exposed if d1 to the roof edge is greater than 0.5h = {(0.5 * h).toFixed(1)} ft
                        and either 1) d1 to the adjacent array is greater than 4 ft
                        or 2) d2 to the next adjacent panel is greater than 4 ft
                    </div>
                </div>

                {/* Not Parallel to Roof Table */}
                <div style={{ marginTop: '30px' }}>
                    <div style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Panels not parallel to roof - all heights & roof slope &lt; 7 deg</div>

                    <div style={{ display: 'flex', justifyContent: 'center', margin: '15px 0' }}>
                        <WindPressureZonesDiagram />
                    </div>
                    <div style={{ fontSize: '0.9em', margin: '5px 0' }}>
                        <div>Wind pressure = Kd qh(GCrn)</div>
                        <div>&gamma;p = 0.900 &nbsp;&nbsp; &gamma;c = 0.960 &nbsp;&nbsp; Kd qh = <strong>{base_pressure.toFixed(2)} psf</strong></div>
                    </div>
                    <div style={{ marginBottom: '5px', fontSize: '0.9em' }}>
                        Normalized wind area An = A * 1,000 / (max Lb or 15)^2
                    </div>

                    <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                        <thead>
                            <tr>
                                <th rowSpan={2} style={{ verticalAlign: 'middle' }}>Location</th>
                                <th colSpan={5}>Wind pressure for normalized area An</th>
                            </tr>
                            <tr>
                                <th>0 sf</th><th>10 sf</th><th>100 sf</th><th>500 sf</th><th>1000 sf</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td colSpan={6} style={{ fontWeight: 'bold', background: '#f5f5f5' }}>Exposed Zones</td></tr>
                            <tr><td>&gamma;E = 1.5 &nbsp;&nbsp; Zone 1</td><td>-43.7</td><td>-31.3</td><td>-18.9</td><td>-16.0</td><td>-16.0</td></tr>
                            <tr><td>Zone 2</td><td>-58.3</td><td>-41.5</td><td>-24.8</td><td>-16.0</td><td>-16.0</td></tr>
                            <tr><td>Zone 3</td><td>-67.0</td><td>-47.6</td><td>-28.1</td><td>-16.0</td><td>-16.0</td></tr>
                            <tr><td colSpan={6} style={{ fontWeight: 'bold', background: '#f5f5f5' }}>Non Exposed Zones</td></tr>
                            <tr><td>&gamma;E = 1.0 &nbsp;&nbsp; Zone 1</td><td>-29.1</td><td>-20.9</td><td>-16.0</td><td>-16.0</td><td>-16.0</td></tr>
                            <tr><td>Zone 2</td><td>-38.8</td><td>-27.7</td><td>-16.5</td><td>-16.0</td><td>-16.0</td></tr>
                            <tr><td>Zone 3</td><td>-44.7</td><td>-31.7</td><td>-18.8</td><td>-16.0</td><td>-16.0</td></tr>
                        </tbody>
                    </table>
                    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
                        <table className="analysis-table" style={{ width: 'auto' }}>
                            <thead>
                                <tr>
                                    <th>A =</th>
                                    <th style={{ background: '#ffcccb' }}><input type="number" value={solar.userInput_not_parallel_1} onChange={e => setSolar({ ...solar, userInput_not_parallel_1: parseFloat(e.target.value) })} style={{ width: '50px' }} /> sf</th>
                                    <th style={{ background: '#ffcccb' }}><input type="number" value={solar.userInput_not_parallel_2} onChange={e => setSolar({ ...solar, userInput_not_parallel_2: parseFloat(e.target.value) })} style={{ width: '50px' }} /> sf</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>An =</td>
                                    <td>44 sf</td><td>4444 sf</td>
                                </tr>
                                <tr><td></td><td>-23.2</td><td>-16.0</td></tr>
                                <tr><td></td><td>-30.7</td><td>-16.0</td></tr>
                                <tr><td></td><td>-35.0</td><td>-16.0</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    );
};