import React, { useState } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { TornadoMwfrsDiagrams } from '../diagrams/TornadoMwfrsDiagrams';

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

    // Local Inputs for this tab (some might be better in global if shared, but specific to this detail tab)
    const [inputs, setInputs] = useState({
        kdt: 0.80,
        kvtRoofUplift: 1.10,
        kvtWalls: 1.00,
        gcpiT_pos: 0.55,
        gcpiT_neg: -0.18,
    });

    // Gust Factor from logic
    const gVal = tornado.userG === '0.85' ? 0.85 : parseFloat(tornado.userG);

    // Tornado qhT (Recalculated or could be stored)
    const qhT = 0.00256 * tornado.KhTor * tornado.Ke * Math.pow(tornado.Vt, 2);

    // qi = qhT
    const qi = qhT;

    // Define rows for the table
    // Surface | L/B | h/L | Cp (Normal) | ... | Cp (Parallel)
    // Values from ASCE 7-22 Figures/Tables or Screenshot hardcoded for now as placeholders or calc
    // Screenshot shows:
    // Wind Normal: L/B=0.47, h/L=1.01
    // Wind Parallel: L/B=2.12, h/L=0.48

    const rows = [
        { label: 'Windward Wall (WW) @ h', cpNorm: 0.80, cpPar: 0.80, kvt: inputs.kvtWalls },
        { label: 'Leeward Wall (LW) @ h', cpNorm: -0.50, cpPar: -0.29, kvt: inputs.kvtWalls },
        { label: 'Side Wall (SW) @ h', cpNorm: -0.70, cpPar: -0.70, kvt: inputs.kvtWalls },
        { label: 'Leeward Roof (LR)', cpNorm: 'Included', cpPar: 'Included', kvt: inputs.kvtRoofUplift }, // Special
        { label: 'Neg Windward Roof: 0 to h/2*', cpNorm: -1.10, cpPar: -0.90, kvt: inputs.kvtRoofUplift },
        { label: 'Neg Windward Roof: > h/2*', cpNorm: -0.70, cpPar: -0.90, kvt: inputs.kvtRoofUplift },
        { label: 'Neg Windward Roof: h to 2h*', cpNorm: null, cpPar: -0.50, kvt: inputs.kvtRoofUplift },
        { label: 'Neg Windward Roof: > 2h*', cpNorm: null, cpPar: -0.30, kvt: inputs.kvtRoofUplift },

        { label: 'Postmin windward roof press.', cpNorm: -0.18, cpPar: -0.18, kvt: inputs.kvtRoofUplift }
    ];

    // GCpiT to use: Both + and - usually checked. Screenshot shows columns for +GCpiT and -GCpiT?
    // Actually screenshot columns: "+++", "w/+GCpiT", "w/-GCpiT"
    // "+++" is likely qhT * KdT * KvT * G * Cp (External Pressure only?)
    // Let's deduce headers.

    return (
        <div className="sheet-content fade-in" style={{ padding: '20px', background: '#e0f7fa', minHeight: '100vh', fontSize: '0.9em' }}>
            <h2 style={{ textDecoration: 'underline' }}>Tornado Loads - MWFRS all h (Except for Open Buildings)</h2>

            <div style={{ display: 'flex', gap: '50px', marginBottom: '20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
                    <label style={{ textAlign: 'right' }}>KdT =</label>
                    <input type="number" value={inputs.kdt} onChange={e => setInputs({ ...inputs, kdt: parseFloat(e.target.value) })} style={{ width: '60px' }} />

                    <label style={{ textAlign: 'right' }}>Tornado Base pressure (q<sub>hT</sub>) =</label>
                    <div style={{ fontWeight: 'bold' }}>{qhT.toFixed(1)} psf</div>

                    <label style={{ textAlign: 'right' }}>Roof Angle (θ) =</label>
                    <div>0.4 deg</div> {/* Derived from slope in geometry? */}

                    <label style={{ textAlign: 'right' }}>Wind normal to ridge ={'{h/2}*L'}:</label>
                    <div>605 sf</div>

                    <label style={{ textAlign: 'right' }}>Wind parallel to ridge ={'{h/2}*L'}:</label>
                    <div>286 sf</div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
                    <label style={{ textAlign: 'right' }}>Bldg dim parallel to ridge =</label>
                    <div>{buildingGeometry.buildingLength} ft</div>

                    <label style={{ textAlign: 'right' }}>Bldg dim normal to ridge =</label>
                    <div>{buildingGeometry.leastWidth} ft</div>

                    <label style={{ textAlign: 'right' }}>h =</label>
                    <div>{tornado.h} ft</div>

                    <label style={{ textAlign: 'right' }}>G<sub>T</sub> =</label>
                    <div>{gVal}</div>

                    <label style={{ textAlign: 'right' }}>Roof Uplift K<sub>vT</sub> =</label>
                    <input type="number" value={inputs.kvtRoofUplift} onChange={e => setInputs({ ...inputs, kvtRoofUplift: parseFloat(e.target.value) })} style={{ width: '60px' }} />

                    <label style={{ textAlign: 'right' }}>Walls & Positive Roof K<sub>vT</sub> =</label>
                    <input type="number" value={inputs.kvtWalls} onChange={e => setInputs({ ...inputs, kvtWalls: parseFloat(e.target.value) })} style={{ width: '60px' }} />
                </div>

                <div>
                    <div>Enclosed Building</div>
                    <div>GC<sub>piT</sub> = +{inputs.gcpiT_pos} / {inputs.gcpiT_neg}</div>
                    <div>qi = qhT</div>
                </div>
            </div>

            <div style={{ textAlign: 'center', fontWeight: 'bold', border: '1px solid black', background: '#ccc' }}>Ultimate Tornado Surface Pressures (psf)</div>
            <table style={{ width: '100%', borderCollapse: 'collapse', border: '2px solid black' }}>
                <thead style={{ background: '#ddd' }}>
                    <tr>
                        <th rowSpan={2} style={{ border: '1px solid black' }}>Surface</th>
                        <th colSpan={3} style={{ border: '1px solid black' }}>Wind Normal to Ridge</th>
                        <th rowSpan={2} style={{ border: '1px solid black' }}>Dist.*</th>
                        <th colSpan={3} style={{ border: '1px solid black' }}>Wind Parallel to Ridge</th>
                    </tr>
                    <tr>
                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>+++</th>
                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>w/+qGC<sub>pT</sub></th>
                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>w/-q<sub>h</sub>GC<sub>pT</sub></th>

                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>+++</th>
                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>w/+qGC<sub>pT</sub></th>
                        <th style={{ border: '1px solid black', fontSize: '0.8em' }}>w/-q<sub>h</sub>GC<sub>pT</sub></th>
                    </tr>
                </thead>
                <tbody>
                    {rows.map((row, idx) => {
                        const calcSet = (cp: number | string | null, kvt: number) => {
                            if (typeof cp !== 'number') return { ext: '', pos: '', neg: '' };
                            const ext = qhT * inputs.kdt * kvt * gVal * cp;
                            const pos = ext - (qi * inputs.gcpiT_pos);
                            const neg = ext - (qi * inputs.gcpiT_neg);

                            return {
                                ext: ext.toFixed(1),
                                plusGCpi: pos.toFixed(1),
                                minusGCpi: neg.toFixed(1)
                            };
                        };

                        const norm = calcSet(row.cpNorm, row.kvt);
                        const par = calcSet(row.cpPar, row.kvt);

                        return (
                            <tr key={idx} style={{ background: idx % 2 === 0 ? 'white' : '#f9f9f9' }}>
                                <td style={{ border: '1px solid black', padding: '2px', whiteSpace: 'nowrap' }}>{row.label}</td>

                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px' }}>{typeof row.cpNorm === 'number' ? row.cpNorm : ''}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{norm.ext}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{norm.plusGCpi}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{norm.minusGCpi}</td>

                                <td style={{ border: '1px solid black', textAlign: 'center', padding: '2px' }}></td>

                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px' }}>{typeof row.cpPar === 'number' ? row.cpPar : ''}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{par.ext}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{par.plusGCpi}</td>
                                <td style={{ border: '1px solid black', textAlign: 'right', padding: '2px', background: '#e0f2f1' }}>{par.minusGCpi}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>

            <div style={{ marginTop: '10px', color: 'blue', fontSize: '0.8em' }}>
                +++ is q<sub>hT</sub>K<sub>dT</sub>K<sub>vT</sub>GCp <br />
                *Horizontal distance from windward edge <br />
                **Roof angle &lt; 10 degrees. Therefore, leeward roof is included in windward roof pressure zones.
            </div>

            <TornadoMwfrsDiagrams />

            {/* Parapet Section Mockup */}
            <div style={{ marginTop: '20px', fontWeight: 'bold' }}>Windward roof overhangs : 20.1 psf (upward : add to +++ windward roof pressure)</div>

        </div>
    );
};