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

interface Props {
    qh: number;
    GCpi: number;
}

export const MwfrsOpenLowRiseSection: React.FC<Props> = ({ qh, GCpi }) => {
    const { buildingGeometry, wind } = useCalculatorStore();

    // Inputs
    const [numFrames, setNumFrames] = useState<number>(4);
    const [solidAreaAs, setSolidAreaAs] = useState<number>(26.0);

    // Geometry
    const B = buildingGeometry.leastWidth;
    const h = buildingGeometry.meanRoofHeight;
    const slopeStr = buildingGeometry.roofSlope; // e.g. "0.5 / 12"

    // Parse Slope
    const parseSlope = (s: string) => {
        const parts = s.split('/');
        if (parts.length > 0) return parseFloat(parts[0]);
        return 0;
    };
    const slopeVal = parseSlope(slopeStr); // Rise per 12 run
    const risePerFoot = slopeVal / 12;
    const totalRise = risePerFoot * (B / 2); // Assuming Gable centered

    // Calculate Heights
    // Mean Roof Height (h) = (He + Hr) / 2
    // Hr = He + totalRise
    // h = (He + He + totalRise) / 2 = He + totalRise/2
    // He = h - totalRise/2
    const eaveHeight = h - (totalRise / 2);
    const ridgeHeight = h + (totalRise / 2);

    // Calculate Ae (Total end wall area if solid)
    // Rectangular part + Triangular part
    const areaRect = B * eaveHeight; // This assumes B is the full width
    const areaTri = 0.5 * B * totalRise;
    const Ae = areaRect + areaTri;

    // Validations
    const isEnclosed = wind.enclosure.classification === 'Enclosed';
    const isTooHigh = h > 60 || h > B; // Screenshot says "h>B - can't use low-rise method"

    return (
        <div className="card" style={{ padding: '15px', marginTop: '20px', background: '#e0f7fa' }}>
            <div className="report-section-title" style={{ marginBottom: '10px' }}>
                Wind Loads - h≤60' Longitudinal Direction MWFRS On Open or Partially
                <br />
                Enclosed Buildings with Transverse Frames and Pitched Roofs
            </div>

            {/* Validation Errors */}
            {isTooHigh && (
                <div style={{ color: 'blue', fontWeight: 'bold' }}>
                    (Kd qh) = 0.0 psf <span style={{ color: 'blue' }}>h&gt;B - can't use low-rise method</span>
                </div>
            )}
            {isEnclosed && (
                <div style={{ color: 'blue', fontWeight: 'bold' }}>
                    GCpi = {GCpi} <span style={{ color: 'blue' }}>Enclosed bldg, procedure doesn't apply</span>
                </div>
            )}

            <div style={{ marginTop: '5px' }}>
                <div>Roof Angle (&theta;) = {(Math.atan(slopeVal / 12) * 180 / Math.PI).toFixed(1)} deg</div>
            </div>

            <div style={{ display: 'flex', marginTop: '20px', gap: '20px' }}>
                {/* Diagram */}
                <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
                    <MwfrsLongitudinalFramesDiagram />
                </div>

                {/* Inputs & Outputs */}
                <div style={{ width: '300px', textAlign: 'right', display: 'flex', flexDirection: 'column', gap: '5px' }}>
                    <div>
                        B = <strong>{B.toFixed(1)} ft</strong>
                    </div>
                    <div>
                        # of frames (n) =
                        <input
                            type="number"
                            className="input-field minimal"
                            value={numFrames}
                            onChange={(e) => setNumFrames(parseFloat(e.target.value) || 0)}
                            style={{ width: '60px', marginLeft: '10px', color: 'red', fontWeight: 'bold' }}
                        />
                    </div>
                    <div>
                        Solid area of end wall including fascia (As) =
                        <input
                            type="number"
                            className="input-field minimal"
                            value={solidAreaAs}
                            onChange={(e) => setSolidAreaAs(parseFloat(e.target.value) || 0)}
                            style={{ width: '60px', marginLeft: '10px', color: 'red', fontWeight: 'bold' }}
                        /> sf
                    </div>
                    <div>
                        Roof ridge height = <strong>{ridgeHeight.toFixed(1)} ft</strong>
                    </div>
                    <div>
                        Roof eave height = <strong>{eaveHeight.toFixed(1)} ft</strong>
                    </div>
                    <div>
                        Total end wall area if solid (Ae) = <strong>{Ae.toFixed(1)} sf</strong>
                    </div>
                </div>
            </div>

            {/* Calculations Section */}
            <LongitudinalForceCalc
                qh={qh}
                Ae={Ae}
                As={solidAreaAs}
                n={numFrames}
            />
        </div>
    );
};

// Sub-component for Calculation Logic to keep main component clean
const LongitudinalForceCalc: React.FC<{ qh: number, Ae: number, As: number, n: number }> = ({ qh, Ae, As, n }) => {
    // Inputs (Defaults from screenshot)
    const [netGCpf, setNetGCpf] = useState(0.734);
    const [KB, setKB] = useState(1.562);
    const [KS, setKS] = useState(0.678);
    // Areas (Not used in formula directly shown but present in screenshot)
    const [area56, setArea56] = useState(500);
    const [area5E6E, setArea5E6E] = useState(72);

    const phi = Ae > 0 ? As / Ae : 0;

    // p = qh * [Net GCpf] * KB * KS
    const p = qh * netGCpf * KB * KS;

    // F = p * Ae ? 
    // Screenshot: "Longitudinal Directional Force (F) = pAe"
    // F in kips = (p * Ae) / 1000
    const F_kips = (p * Ae) / 1000;

    return (
        <div style={{ marginTop: '20px', textAlign: 'center', fontSize: '0.95em' }}>
            <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Longitudinal Directional Force (F) = pAe</div>
            <div style={{ marginBottom: '10px' }}>p= qh [(GCpf)windward -(GCpf)leeward] K<sub>B</sub> K<sub>S</sub></div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 150px', gap: '5px', justifyContent: 'center', maxWidth: '400px', margin: '0 auto', textAlign: 'right' }}>
                <div>Solidarity ratio (&Phi;) =</div>
                <div>{phi.toFixed(3)}</div>

                <div>n =</div>
                <div>{n}</div>

                <div>K<sub>B</sub> =</div>
                <div>
                    <input
                        type="number"
                        value={KB}
                        onChange={e => setKB(parseFloat(e.target.value) || 0)}
                        className="input-field minimal"
                        style={{ width: '60px', textAlign: 'right' }}
                    />
                </div>

                <div>K<sub>S</sub> =</div>
                <div>
                    <input
                        type="number"
                        value={KS}
                        onChange={e => setKS(parseFloat(e.target.value) || 0)}
                        className="input-field minimal"
                        style={{ width: '60px', textAlign: 'right' }}
                    />
                </div>

                <div>Zones 5 & 6 area =</div>
                <div>
                    <input
                        type="number"
                        value={area56}
                        onChange={e => setArea56(parseFloat(e.target.value) || 0)}
                        className="input-field minimal"
                        style={{ width: '60px', textAlign: 'right' }}
                    />
                    sf</div>

                <div>5E & 6E area =</div>
                <div>
                    <input
                        type="number"
                        value={area5E6E}
                        onChange={e => setArea5E6E(parseFloat(e.target.value) || 0)}
                        className="input-field minimal"
                        style={{ width: '60px', textAlign: 'right' }}
                    />
                    sf</div>

                <div>(GCpf) windward - (GCpf) leeward] =</div>
                <div>
                    <input
                        type="number"
                        value={netGCpf}
                        onChange={e => setNetGCpf(parseFloat(e.target.value) || 0)}
                        className="input-field minimal"
                        style={{ width: '60px', textAlign: 'right' }}
                    />
                </div>

                <div>p =</div>
                <div>{p.toFixed(1)} psf</div>
            </div>

            <div style={{ marginTop: '15px', fontWeight: 'bold', fontSize: '1.1em' }}>
                Total force to be resisted by MWFRS (F) = &nbsp;
                <span style={{ color: 'black' }}>{F_kips.toFixed(1)} kips</span>
                <span style={{ fontSize: '0.8em', fontWeight: 'normal' }}> applied at the centroid of the end wall area Ae</span>
            </div>

            <div style={{ marginTop: '20px', fontSize: '0.85em', textAlign: 'left', maxWidth: '500px', margin: '20px auto 0' }}>
                Note: The longitudinal force acts in combination with roof loads calculated elsewhere for an open or partially enclosed building.
            </div>
        </div>
    );
};