import React, { useState } from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import { LoadCaseADiagram, LoadCaseBDiagram, LoadCaseCDiagram, SolidSignDimensionsDiagram } from '../diagrams/OtherStructuresDiagrams';

export const OtherStructuresSheet: React.FC = () => {
    const { wind } = useCalculatorStore();

    // Kd Overrides
    const [kdOverrides, setKdOverrides] = useState({
        A: 0.85, B: 0.85, C: 0.90, D: 0.85
    });

    // Section A: Solid Freestanding Walls & Solid Signs
    const [solidSign, setSolidSign] = useState({
        h: 80.0, s: 20.0, B: 50.0, Lr: 0.0, openPct: 0.0, userInputAs: 10.0
    });
    const Kd_A = kdOverrides.A;

    // Section B: Open Signs & Open Frames
    const [openSign, setOpenSign] = useState({
        z: 15.0, width: 0.0, diameter: 2.0, openPct: 35.0, userInputAf: 10.0
    });
    const Kd_B = kdOverrides.B;

    // Section C: Chimneys, Tanks
    const [chimney, setChimney] = useState({
        z: 15.0, type: 'Square' as 'Square' | 'Hexagonal' | 'Round', h: 15.0, D: 1.0, surface: 'N/A', userInputAf: 10.0
    });
    const Kd_C = kdOverrides.C;

    // Section D: Trussed Towers
    const [tower, setTower] = useState({
        z: 15.0, epsilon: 0.27, crossSection: 'Square' as 'Square' | 'Triangular', memberShape: 'Flat' as 'Flat' | 'Round', userInputAf: 10.0
    });
    const Kd_D = kdOverrides.D;

    // --- Calculations ---

    // A. Solid Signs
    const ratio_s_h = solidSign.s / solidSign.h;
    const ratio_B_s = solidSign.B / solidSign.s;
    const ratio_Lr_s = solidSign.Lr / solidSign.s;

    // Qh calc for height (h)
    const qh_A = calculateWindPressure({ speed: wind.speed, exposure: wind.exposure, height: solidSign.h, kzt: wind.topography.factor, kd: 1.0, ke: wind.groundElevationFactor, g: -1 }) * Kd_A;

    // Cf logic placeholder (ASCE 7 Figure 29.3-1)
    const Cf_AB = 1.80;
    const F_AB = qh_A * wind.gust.factor * Cf_AB * solidSign.userInputAs;

    // Case C logic placeholder
    const Cf_C_0s = 2.43;
    const Cf_C_s2s = 1.60;
    const Cf_C_2s3s = 1.15;

    // B. Open Signs
    const qz_B = calculateWindPressure({ speed: wind.speed, exposure: wind.exposure, height: openSign.z, kzt: wind.topography.factor, kd: 1.0, ke: wind.groundElevationFactor, g: -1 }) * Kd_B;
    const Cf_B = 1.6; // Placeholder for epsilon based
    const F_B = qz_B * wind.gust.factor * Cf_B * openSign.userInputAf;

    // C. Chimneys
    const qz_C = calculateWindPressure({ speed: wind.speed, exposure: wind.exposure, height: chimney.z, kzt: wind.topography.factor, kd: 1.0, ke: wind.groundElevationFactor, g: -1 }) * Kd_C;
    const Cf_C_Diag = 1.28; // Square diag
    const Cf_C_Norm = 1.67; // Square normal
    const F_C_Diag = qz_C * wind.gust.factor * Cf_C_Diag * chimney.userInputAf;
    const F_C_Norm = qz_C * wind.gust.factor * Cf_C_Norm * chimney.userInputAf;

    // D. Towers
    const qz_D = calculateWindPressure({ speed: wind.speed, exposure: wind.exposure, height: tower.z, kzt: wind.topography.factor, kd: 1.0, ke: wind.groundElevationFactor, g: -1 }) * Kd_D;
    const Cf_D_Diag = 3.24;
    const Cf_D_Norm = 2.70;
    const F_D_Diag = qz_D * wind.gust.factor * Cf_D_Diag * tower.userInputAf;
    const F_D_Norm = qz_D * wind.gust.factor * Cf_D_Norm * tower.userInputAf;


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

            <div style={{ display: 'flex', gap: '20px', background: '#e0f7fa', padding: '10px', marginBottom: '20px', justifyContent: 'center', flexWrap: 'wrap' }}>
                <div>Wind Factor = 1.00</div>
                <div>Gust Effect Factor (G) = {wind.gust.factor}</div>
                <div>Kzt = {wind.topography.factor}</div>
                <div>Ultimate Wind Speed = {wind.speed} mph</div>
                <div>Exposure = {wind.exposure}</div>

                {/* Kd Override Table */}
                <div style={{ background: '#f5f5f5', border: '1px solid #ccc', padding: '10px', fontSize: '0.9em', display: 'flex', flexDirection: 'column', gap: '5px' }}>
                    <div style={{ fontWeight: 'bold', borderBottom: '1px solid #ccc', marginBottom: '5px', textAlign: 'center' }}>
                        Kd override values<br />
                        for jurisdictions that<br />
                        modify Kd
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 60px', gap: '5px', alignItems: 'center' }}>
                        <div>A. Solid Signs</div>
                        <input type="number" value={kdOverrides.A} onChange={e => setKdOverrides({ ...kdOverrides, A: parseFloat(e.target.value) })} style={{ width: '50px', background: '#d1fae5' }} />
                        <div>B. Open Signs, etc</div>
                        <input type="number" value={kdOverrides.B} onChange={e => setKdOverrides({ ...kdOverrides, B: parseFloat(e.target.value) })} style={{ width: '50px', background: '#d1fae5' }} />
                        <div>C. Chimneys, etc</div>
                        <input type="number" value={kdOverrides.C} onChange={e => setKdOverrides({ ...kdOverrides, C: parseFloat(e.target.value) })} style={{ width: '50px', background: '#d1fae5' }} />
                        <div>D. Trussed towers</div>
                        <input type="number" value={kdOverrides.D} onChange={e => setKdOverrides({ ...kdOverrides, D: parseFloat(e.target.value) })} style={{ width: '50px', background: '#d1fae5' }} />
                    </div>
                </div>
            </div>

            {/* A. Solid Freestanding Walls */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#e0f2fe' }}>
                <h3>A. Solid Freestanding Walls & Solid Signs (& open signs with less than 30% open)</h3>

                <div style={{ display: 'flex', gap: '15px', overflowX: 'auto', marginBottom: '15px', paddingBottom: '10px' }}>
                    <SolidSignDimensionsDiagram />
                    <LoadCaseADiagram />
                    <LoadCaseBDiagram />
                    <LoadCaseCDiagram />
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px' }}>
                    <div>
                        <div>Dist to sign top (h) = <input type="number" value={solidSign.h} onChange={e => setSolidSign({ ...solidSign, h: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>Height (s) = <input type="number" value={solidSign.s} onChange={e => setSolidSign({ ...solidSign, s: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>Width (B) = <input type="number" value={solidSign.B} onChange={e => setSolidSign({ ...solidSign, B: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>Wall Return (Lr) = <input type="number" value={solidSign.Lr} onChange={e => setSolidSign({ ...solidSign, Lr: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>Directionality (Kd) = {Kd_A} (Override A)</div>
                        <div>% open area = <input type="number" value={solidSign.openPct} onChange={e => setSolidSign({ ...solidSign, openPct: parseFloat(e.target.value) })} style={{ width: '60px' }} />%</div>
                    </div>
                    <div>
                        <div>s/h = {ratio_s_h.toFixed(2)}</div>
                        <div>B/s = {ratio_B_s.toFixed(2)}</div>
                        <div>Lr/s = {ratio_Lr_s.toFixed(2)}</div>
                        <div>Kd qh = {qh_A.toFixed(1)} psf</div>
                    </div>
                    <div>
                        <div style={{ textDecoration: 'underline', fontWeight: 'bold' }}>Case A & B</div>
                        <div>Cf = {Cf_AB.toFixed(2)}</div>
                        <div>F = Kd qh G Cf As = <strong>{(qh_A * wind.gust.factor * Cf_AB).toFixed(1)} As</strong></div>
                        <div>As = <input type="number" value={solidSign.userInputAs} onChange={e => setSolidSign({ ...solidSign, userInputAs: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_AB.toFixed(0)} lbs</strong></div>

                        <div style={{ textDecoration: 'underline', fontWeight: 'bold', marginTop: '10px' }}>Case C</div>
                        {/* Simplified Case C Table */}
                        <table style={{ fontSize: '0.8em', width: '100%' }}>
                            <thead><tr><th>Horiz Dist</th><th>Cf</th><th>F (psf)</th></tr></thead>
                            <tbody>
                                <tr><td>0 to s</td><td>{Cf_C_0s}</td><td>{(qh_A * wind.gust.factor * Cf_C_0s).toFixed(1)} As</td></tr>
                                <tr><td>s to 2s</td><td>{Cf_C_s2s}</td><td>{(qh_A * wind.gust.factor * Cf_C_s2s).toFixed(1)} As</td></tr>
                                <tr><td>2s to 3s</td><td>{Cf_C_2s3s}</td><td>{(qh_A * wind.gust.factor * Cf_C_2s3s).toFixed(1)} As</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {/* B. Open Signs */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#f0fdf4' }}>
                <h3>B. Open Signs & Single-Plane Open Frames (openings 30% or more)</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                    <div>
                        <div>Height to centroid (z) = <input type="number" value={openSign.z} onChange={e => setOpenSign({ ...openSign, z: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>% of open area = <input type="number" value={openSign.openPct} onChange={e => setOpenSign({ ...openSign, openPct: parseFloat(e.target.value) })} style={{ width: '60px' }} />%</div>
                        <div>Directionality (Kd) = {Kd_B} (Override B)</div>
                    </div>
                    <div>
                        <div>Base pressure (Kd qz) = {qz_B.toFixed(1)} psf</div>
                        <div>Cf = {Cf_B}</div>
                        <div>F = Kdqz G Cf Af = <strong>{(qz_B * wind.gust.factor * Cf_B).toFixed(1)} Af</strong></div>
                        <div>Solid Area Af = <input type="number" value={openSign.userInputAf} onChange={e => setOpenSign({ ...openSign, userInputAf: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_B.toFixed(0)} lbs</strong></div>
                    </div>
                </div>
            </div>

            {/* C. Chimneys */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#fffbeb' }}>
                <h3>C. Walls of Chimneys, Tanks, & Similar Structures</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '20px' }}>
                    <div>
                        <div>Height to centroid (z) = <input type="number" value={chimney.z} onChange={e => setChimney({ ...chimney, z: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>Cross-Section:
                            <select value={chimney.type} onChange={e => setChimney({ ...chimney, type: e.target.value as any })}>
                                <option>Square</option><option>Round</option><option>Hexagonal</option>
                            </select>
                        </div>
                        <div>Height (h) = {chimney.h} ft</div>
                        <div>Width (D) = {chimney.D} ft</div>
                    </div>
                    <div>
                        <div>Base pressure (Kd qz) = {qz_C.toFixed(1)} psf</div>
                        <div>h/D = {(chimney.h / chimney.D).toFixed(2)}</div>
                    </div>
                    <div>
                        <div style={{ fontSize: '0.9em' }}>Square (wind along diagonal)</div>
                        <div>Cf = {Cf_C_Diag}</div>
                        <div>F = <strong>{(qz_C * wind.gust.factor * Cf_C_Diag).toFixed(1)} Af</strong></div>
                        <div>Af = <input type="number" value={chimney.userInputAf} onChange={e => setChimney({ ...chimney, userInputAf: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_C_Diag.toFixed(0)} lbs</strong></div>
                    </div>
                    <div>
                        <div style={{ fontSize: '0.9em' }}>Square (wind normal to face)</div>
                        <div>Cf = {Cf_C_Norm}</div>
                        <div>F = <strong>{(qz_C * wind.gust.factor * Cf_C_Norm).toFixed(1)} Af</strong></div>
                        <div>Af = <input type="number" value={chimney.userInputAf} onChange={e => setChimney({ ...chimney, userInputAf: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_C_Norm.toFixed(0)} lbs</strong></div>
                    </div>
                </div>
            </div>

            {/* D. Trussed Towers */}
            <div className="card" style={{ padding: '15px', marginBottom: '20px', background: '#fdf2f8' }}>
                <h3>D. Trussed Towers</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '20px' }}>
                    <div>
                        <div>Height to centroid (z) = <input type="number" value={tower.z} onChange={e => setTower({ ...tower, z: parseFloat(e.target.value) })} style={{ width: '60px' }} /> ft</div>
                        <div>&epsilon; = {tower.epsilon}</div>
                        <div>Cross Section: Square</div>
                    </div>
                    <div>
                        <div>Base pressure (Kd qz) = {qz_D.toFixed(1)} psf</div>
                    </div>
                    <div>
                        <div style={{ fontSize: '0.9em' }}>Square (wind along tower diagonal)</div>
                        <div>Cf = {Cf_D_Diag}</div>
                        <div>F = <strong>{(qz_D * wind.gust.factor * Cf_D_Diag).toFixed(1)} Af</strong></div>
                        <div>Af = <input type="number" value={tower.userInputAf} onChange={e => setTower({ ...tower, userInputAf: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_D_Diag.toFixed(0)} lbs</strong></div>
                    </div>
                    <div>
                        <div style={{ fontSize: '0.9em' }}>Square (wind normal to face)</div>
                        <div>Cf = {Cf_D_Norm}</div>
                        <div>F = <strong>{(qz_D * wind.gust.factor * Cf_D_Norm).toFixed(1)} Af</strong></div>
                        <div>Af = <input type="number" value={tower.userInputAf} onChange={e => setTower({ ...tower, userInputAf: parseFloat(e.target.value) })} style={{ width: '50px', background: '#ffcccb' }} /> sf</div>
                        <div>F = <strong>{F_D_Norm.toFixed(0)} lbs</strong></div>
                    </div>
                </div>
            </div>

        </div>
    );
};