import React from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';

export const TornadoSheet: React.FC = () => {
    const { tornado, setTornado } = useCalculatorStore();

    // Constants for Gust Factor (Exposure C default)
    const c = 0.20;
    const zMin = 15;
    const l = 500;
    const e_bar = 0.20;

    // --- Calculations ---

    // qhT Calculation
    // qhT = 0.00256 * KhTor * Ke * Vt^2
    const qhT = 0.00256 * tornado.KhTor * tornado.Ke * Math.pow(tornado.Vt, 2);

    // Internal Pressure Coefficient (GCpiT)
    const gcpiT_pos = 0.55;
    const gcpiT_neg = -0.18; // Enclosed

    // Directionality Factor KdT
    // 0.80 MWFRS, 1.00 C&C Roof Zone 1 (Essential), 1.00 Others
    const kdt_mwfrs = 0.80;
    const kdt_cc_roof1 = tornado.isEssential === 'Yes' ? 1.00 : 0.85; // Assumption for non-essential
    const kdt_cc_others = 1.00;
    const kdt_rooftop = 1.00;

    // --- Gust Factor G Calculation ---
    // Using ASCE 7-22 Tornado Gust Factor Approx (similar to standard wind)
    // lz = l * (z_bar/10)^e_bar where z_bar = 0.6*h
    // However, screenshot shows explicit constant values or calc inputs.
    // Let's implement the logic shown in screenshot variables:
    // iz(0.6h) = c * (33 / z_bar)^1/6  <-- Standard wind formula approximation or similar
    // Actually screenshot has Iz(0.6h) = 15.0 ft? No unit is ft, probably % or value.
    // Let's infer standard ASCE 7 formula for I_z:
    // z_bar = 0.6 * h
    const z_bar = Math.max(zMin, 0.6 * tornado.h);

    // I_z = c * (33 / z_bar)^(1/6)
    const Iz = c * Math.pow(33 / z_bar, 1 / 6);

    // L_z = l * (z_bar / 33)^e_bar
    const Lz = l * Math.pow(z_bar / 33, e_bar);

    // Q = sqrt( 1 / (1 + 0.63 * ((B+h)/Lz)^0.63) ) 
    // This is the background response factor Q formula roughly.
    // Let's stick to the numbers in screenshot to reverse engineer or just implement standard.
    // Screenshot: Q = 0.93. 
    // Let's assume standard ASCE 7 formula for Q:
    const Q_calc = Math.sqrt(1 / (1 + 0.63 * Math.pow((tornado.B + tornado.h) / Lz, 0.63)));

    // gq and gv usually 3.4
    const gq = 3.4;
    const gv = 3.4;

    // G_T formula
    // G = 0.925 * ( (1 + 1.7*gq*Iz*Q) / (1 + 1.7*gv*Iz) )  <-- Standard Gust Factor
    // Tornado code might differ slightly or use same. Screenshot implies G_T calc using these vars.
    const G_T_calc = 0.925 * ((1 + 1.7 * gq * Iz * Q_calc) / (1 + 1.7 * gv * Iz));

    // Screenshot says: G_T = 0.89 > 0.85 use Gt = 0.85
    // Wait, usually lower bound is 0.85. 
    // The screenshot text "0.89 > 0.85 use Gt = 0.85" is weird if 0.89 is valid.
    // Maybe it means "0.89. If > 0.85 use Gt=0.85"? No, usually G=0.85 is for rigid.
    // Or maybe it says "Use Gt = 0.85" as a user choice input.
    // Let's follow the calculated value logic: use calculated, but allow override.

    // Kvt Table Data (Static display mostly based on screenshot)
    // Structure: Category | Value

    return (
        <div className="sheet-content fade-in" style={{ padding: '20px', background: '#e0f7fa', minHeight: '100vh' }}>
            <h2>Tornado Loads : ASCE 7-22</h2>

            {/* Top Link Section */}
            <div style={{ background: '#fff9c4', border: '2px solid black', padding: '10px', width: 'fit-content', marginBottom: '20px' }}>
                <div style={{ textAlign: 'center', fontWeight: 'bold' }}>Tornado speed tool</div>
                <div style={{ textAlign: 'center' }}><a href="https://asce7hazardtool.online/" target="_blank" rel="noreferrer">https://asce7hazardtool.online/</a></div>
            </div>

            <div style={{ display: 'flex', gap: '40px' }}>

                {/* Left Column: Interpolation Tool */}
                <div>
                    <table style={{ borderCollapse: 'collapse', border: '1px solid black', background: '#ddd', fontSize: '0.9em' }}>
                        <thead>
                            <tr><th colSpan={2} style={{ borderBottom: '1px solid black' }}>Interpolation tool</th></tr>
                            <tr>
                                <th style={{ borderRight: '1px solid black', padding: '2px 5px' }}>Plan SF area</th>
                                <th style={{ padding: '2px 5px' }}>V<sub>T</sub> mph</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ color: 'red', background: 'white' }}>
                                <td style={{ borderRight: '1px solid black', padding: '2px 5px' }}>40,000</td>
                                <td style={{ padding: '2px 5px' }}>85</td>
                            </tr>
                            <tr style={{ color: 'red', background: 'white' }}>
                                <td style={{ borderRight: '1px solid black', padding: '2px 5px' }}>100,000</td>
                                <td style={{ padding: '2px 5px' }}>93</td>
                            </tr>
                            <tr style={{ background: 'white' }}>
                                <td style={{ borderRight: '1px solid black', padding: '2px 5px', borderTop: '1px solid black' }}>50,000</td>
                                <td style={{ padding: '2px 5px', borderTop: '1px solid black' }}>86.9 mph</td>
                            </tr>
                        </tbody>
                    </table>
                    <div style={{ maxWidth: '300px', fontSize: '0.8em', marginTop: '10px' }}>
                        The plan area is the smallest convex polygon enclosing the building footprint...
                    </div>
                </div>

                {/* Right Column: Main Inputs & Results */}
                <div style={{ flex: 1 }}>
                    <div style={{ display: 'grid', gridTemplateColumns: '250px 100px 100px', gap: '5px', alignItems: 'center' }}>
                        <label>Risk Category</label>
                        <div style={{ fontWeight: 'bold' }}>III</div>
                        <div></div>

                        <label>Effective Plan Area (Ae)</label>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <input type="number" value={tornado.Ae} onChange={e => setTornado({ Ae: parseFloat(e.target.value) })} style={{ width: '60px', border: '2px solid green' }} />
                        </div>
                        <div>SF</div>

                        <label>Tornado Speed (V<sub>T</sub>)</label>
                        <div style={{ color: 'red' }}>
                            <input type="number" value={tornado.Vt} onChange={e => setTornado({ Vt: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red' }} />
                        </div>
                        <div style={{ color: 'red' }}>mph</div>

                        <label>Ground EL Factor (Ke)</label>
                        <input type="number" value={tornado.Ke} onChange={e => setTornado({ Ke: parseFloat(e.target.value) })} style={{ width: '60px' }} />
                        <div></div>

                        <label>Exposure Coeff (KhTor)</label>
                        <input type="number" value={tornado.KhTor} onChange={e => setTornado({ KhTor: parseFloat(e.target.value) })} style={{ width: '60px' }} />
                        <div></div>

                        <label>Enclosure Classif.</label>
                        <select value={tornado.enclosure} onChange={e => setTornado({ enclosure: e.target.value })} style={{ gridColumn: 'span 2' }}>
                            <option>Enclosed Building</option>
                            <option>Partially Enclosed</option>
                            <option>Open</option>
                        </select>
                    </div>

                    <div style={{ marginTop: '10px', display: 'grid', gridTemplateColumns: '250px 80px', gap: '5px', fontSize: '0.9em', background: '#d0f0c0', padding: '5px' }}>
                        <div style={{ gridColumn: 'span 2' }}>Internal pressure Coefficient:</div>
                        <div style={{ textAlign: 'right' }}>positive</div>
                        <div>{gcpiT_pos}</div>
                        <div style={{ textAlign: 'right' }}>negative</div>
                        <div>{gcpiT_neg}</div>
                    </div>

                    <div style={{ marginTop: '10px', display: 'grid', gridTemplateColumns: '250px 80px 150px', gap: '5px', fontSize: '0.9em' }}>
                        <div style={{ gridColumn: 'span 3' }}>Directionality Factor (KdT):</div>
                        <div style={{ textAlign: 'right' }}>MWFRS</div>
                        <div style={{ background: '#d0f0c0' }}>{kdt_mwfrs.toFixed(2)}</div>
                        <div></div>

                        <div style={{ textAlign: 'right' }}>C&C Roof Zone 1'</div>
                        <div>{kdt_cc_roof1.toFixed(2)}</div>
                        <select value={tornado.isEssential} onChange={e => setTornado({ isEssential: e.target.value as any })}>
                            <option value="Yes">Essential Facility? - Yes</option>
                            <option value="No">Essential Facility? - No</option>
                        </select>

                        <div style={{ textAlign: 'right' }}>C&C for all others</div>
                        <div>{kdt_cc_others.toFixed(2)}</div>
                        <div></div>

                        <div style={{ textAlign: 'right' }}>Rooftop equipment</div>
                        <div>{kdt_rooftop.toFixed(2)}</div>
                        <div>Other structures, use wind Kd</div>
                    </div>

                    <div style={{ margin: '20px 0', fontSize: '1.2em', fontWeight: 'bold' }}>
                        qhT = .00256KhTor KeVT^2 = <span style={{ marginLeft: '20px' }}>{qhT.toFixed(1)} psf</span>
                    </div>

                    {/* Gust Factor Section */}
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                        <div>
                            <div style={{ textDecoration: 'underline', fontWeight: 'bold', marginBottom: '5px' }}>Tornado Gust Effect Factor G</div>
                            <div style={{ display: 'grid', gridTemplateColumns: '100px 60px 40px', gap: '5px', fontSize: '0.9em' }}>
                                <label style={{ textAlign: 'right' }}>h =</label>
                                <input type="number" value={tornado.h} onChange={e => setTornado({ h: parseFloat(e.target.value) })} style={{ background: '#d0f0c0' }} />
                                <span>ft</span>

                                <label style={{ textAlign: 'right' }}>B =</label>
                                <input type="number" value={tornado.B} onChange={e => setTornado({ B: parseFloat(e.target.value) })} style={{ background: '#d0f0c0' }} />
                                <span>ft</span>

                                <label style={{ textAlign: 'right' }}>lz (0.6h) =</label>
                                <input type="number" disabled value={(0.6 * tornado.h).toFixed(1)} style={{ background: '#d0f0c0' }} />
                                {/* Screenshot says lz(0.6h) but formula usually involves z_bar directly */}
                                <span>ft</span>

                                <label style={{ textAlign: 'right' }}>e =</label>
                                <div>{e_bar.toFixed(2)}</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>l =</label>
                                <div>{l} ft</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>Zmin =</label>
                                <div>{zMin} ft</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>c =</label>
                                <div>{c.toFixed(2)}</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>gq, gv =</label>
                                <div>{gq}</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>Lz =</label>
                                <div>{Lz.toFixed(1)} ft</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>Q =</label>
                                <div>{Q_calc.toFixed(2)}</div>
                                <div></div>

                                <label style={{ textAlign: 'right' }}>Iz =</label>
                                <div>{Iz.toFixed(2)}</div>
                                <div></div>

                                <label style={{ textAlign: 'right', fontWeight: 'bold' }}>G<sub>T</sub> =</label>
                                <div style={{ fontWeight: 'bold' }}>{G_T_calc.toFixed(2)}</div>
                                <div style={{ fontSize: '0.8em', whiteSpace: 'nowrap' }}>{`>0.85 use Gt = 0.85`}</div>
                            </div>
                        </div>

                        <div style={{ alignSelf: 'end' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                <label>G =</label>
                                <div>0.85</div>
                                <select value={tornado.userG} onChange={e => setTornado({ userG: e.target.value })}>
                                    <option value="0.85">Use Gt = 0.85</option>
                                    <option value={G_T_calc.toFixed(2)}>Use Calc Gt</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {/* Kvt Table */}
                    <div style={{ marginTop: '20px' }}>
                        <div style={{ textDecoration: 'underline', fontWeight: 'bold' }}>Tornado Pressure Coefficient Adjustment Factor for Vertical Winds K<sub>vT</sub></div>

                        <div style={{ marginTop: '10px' }}>
                            <div style={{ fontWeight: 'bold' }}>Buildings</div>
                            <div style={{ fontWeight: 'bold', marginLeft: '10px' }}>Negative (uplift) pressures on Roofs</div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '20px' }}>
                                <div>Main Wind Force Resisting System</div>
                                <div>1.10</div>
                            </div>
                            <div style={{ marginLeft: '20px' }}>Components and Cladding:</div>
                            <div style={{ marginLeft: '40px' }}>Roof Angle (θ) = 0.4 deg</div>
                            <div style={{ marginLeft: '40px', fontStyle: 'italic' }}>Roof Slope ≤ 7 degrees</div>

                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '60px' }}>
                                <div>Zone 1</div><div>1.20</div>
                            </div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '60px' }}>
                                <div>Zone 2</div><div>1.05</div>
                            </div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '60px' }}>
                                <div>Zone 3</div><div>1.05</div>
                            </div>

                            <div style={{ fontWeight: 'bold', marginLeft: '10px', marginTop: '10px' }}>Positive (downward) pressures on Roofs</div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '20px' }}>
                                <div></div><div>1.00</div>
                            </div>

                            <div style={{ fontWeight: 'bold', marginTop: '10px' }}>Wall Pressures</div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '300px', marginLeft: '20px' }}>
                                <div>All Other Cases</div><div>1.00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style={{ marginTop: '20px' }}>
                <div style={{ color: 'blue' }}>NOTE: Is output nominal tornado wind pressures enter a wind factor of 0.6 on the "Code" page.</div>
            </div>
        </div>
    );
};