import React from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import { ComponentsCladdingZones } from './ComponentsCladdingZones';

const calculatePress = (gcp: number, qh: number, _gcpi: number) => {
    // p = qh * (GCp - GCpi)
    // For now assuming GCpi is positive for negative GCp to find worst case? 
    // Or just (GCp - (+/- GCpi)).
    // Screenshot: -1.70 -> -38.2. qh=22.5 (Kd qh). 
    // 22.5 * (-1.70) = -38.25. Matches closely.
    // It seems screenshot values use Kd*qh directly.
    return (0.85 * qh) * gcp;
};

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

    // Geometry
    const h = buildingGeometry.meanRoofHeight;
    const qh = calculateWindPressure({
        speed: wind.speed,
        exposure: wind.exposure,
        height: h,
        kzt: wind.topography.factor,
        kd: wind.directionality,
        ke: wind.groundElevationFactor,
        g: -1
    });

    // Derived for Header
    const Kh = (qh / (0.00256 * wind.topography.factor * wind.directionality * Math.pow(wind.speed, 2))).toFixed(3);
    const minParapetHt = 0.0; // Placeholder or Input
    const a = Math.max(0.04 * buildingGeometry.leastWidth, 3); // Approx 'a' calculation, need precise rule 
    const point6h = 0.6 * h;
    const point2h = 0.2 * h;

    return (
        <div className="sheet-content fade-in">
            <div className="flex-row" style={{ justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                <h2>Wind Loads - Components & Cladding : h ≤ 60'</h2>
                <div className="flex-row gap-sm" style={{ fontSize: '0.9em', color: '#666' }}>
                    <div>Job No: {useCalculatorStore.getState().general.jobNo}</div>
                    <div>By: {useCalculatorStore.getState().general.calculatedBy}</div>
                </div>
            </div>

            {/* Header Data */}
            <div className="card" style={{ padding: '15px', background: '#e0f7fa', marginBottom: '20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
                    <div>
                        <div>Base pressure (qh) = <strong>{qh.toFixed(1)} psf</strong></div>
                        <div>(Kd qh) = <strong>{(0.85 * qh).toFixed(1)} psf</strong></div>
                        <div>Minimum parapet ht = {minParapetHt.toFixed(1)} ft</div>
                        <div>Roof Angle (&theta;) = {buildingGeometry.roofSlope} (need conversion)</div>
                        <div>Type of roof = {buildingGeometry.roofType}</div>
                    </div>
                    <div>
                        <div>Kh = {Kh}</div>
                        <div>h = {h.toFixed(1)} ft</div>
                        <div>0.6h = {point6h.toFixed(1)} ft</div>
                        <div>GCpi = +/- {wind.internalPressure}</div>
                        <div>Kd qi = Kd qh = {(0.85 * qh).toFixed(1)} psf</div>
                    </div>
                    <div>
                        <div>0.2h = {point2h.toFixed(1)} ft</div>
                    </div>
                </div>
            </div>

            {/* Dimensions Summary */}
            <div style={{ marginBottom: '10px', fontSize: '0.9em' }}>
                a = {a.toFixed(1)} ft (Width of edge/corner zones)
            </div>

            {/* ROOF SECTION */}
            <div style={{ marginBottom: '30px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: '2px solid black', marginBottom: '5px' }}>
                    <h3>Roof</h3>
                    <div style={{ fontSize: '0.9em' }}>Kd qi = Kd qh = {(0.85 * qh).toFixed(1)} psf</div>
                </div>

                <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                    <thead>
                        <tr>
                            <th rowSpan={2} style={{ textAlign: 'left' }}>Zone / Area</th>
                            <th colSpan={4}>GCp +/- GCpi ({wind.internalPressure})</th>
                            <th colSpan={4}>Surface Pressure (psf)</th>
                        </tr>
                        <tr>
                            <th>10 sf</th><th>100 sf</th><th>500 sf</th><th>1000 sf</th>
                            <th>10 sf</th><th>100 sf</th><th>500 sf</th><th>1000 sf</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* Placeholder Rows for Monoslope Zones (1, 2, 3 etc) - data is hardcoded/example based on Screenshot */}
                        {['Zone 1', 'Zone 2', 'Zone 3', 'Zone 1\'', 'Zone 2\'', 'Zone 3\''].map((zone, idx) => (
                            <tr key={idx}>
                                <td>{zone}</td>
                                {/* Placeholder Data - using random logic to mimic "lookup" */}
                                <td>-1.88</td><td>-1.47</td><td>-1.18</td><td>-1.18</td>
                                <td>{calculatePress(-1.88, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-1.47, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-1.18, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-1.18, qh, wind.internalPressure).toFixed(1)}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <div style={{ color: 'blue', fontSize: '0.85em', marginTop: '5px' }}>
                    Overhang pressures in the table above assume an internal pressure coefficient (GCpi) of 0.0<br />
                    Overhang soffit pressure equals adj wall pressure (which includes internal pressure of 4 psf)
                </div>
            </div>

            {/* PARAPET SECTION */}
            <div style={{ marginBottom: '30px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: '2px solid black', marginBottom: '5px' }}>
                    <h3>Parapet</h3>
                    <div style={{ fontSize: '0.9em' }}>Kd qp = {(0.85 * qh).toFixed(1)} psf</div>
                </div>
                <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                    <thead>
                        <tr>
                            <th rowSpan={2} style={{ textAlign: 'left' }}>Solid Parapet Pressure</th>
                            <th colSpan={5}>Surface Pressure (psf)</th>
                        </tr>
                        <tr>
                            <th>10 sf</th><th>20 sf</th><th>50 sf</th><th>100 sf</th><th>200 sf</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CASE A: Zone 2</td>
                            <td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td>
                        </tr>
                        <tr>
                            <td>CASE A: Zone 3</td>
                            <td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {/* WALLS SECTION */}
            <div style={{ marginBottom: '30px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: '2px solid black', marginBottom: '5px' }}>
                    <h3>Walls</h3>
                    <div style={{ fontSize: '0.9em' }}>wall a = {a.toFixed(1)} ft</div>
                </div>
                <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                    <thead>
                        <tr>
                            <th rowSpan={2} style={{ textAlign: 'left' }}>Area / Zone</th>
                            <th colSpan={4}>GCp +/- GCpi</th>
                            <th colSpan={4}>Surface Pressure at h</th>
                        </tr>
                        <tr>
                            <th>10 sf</th><th>100 sf</th><th>200 sf</th><th>500 sf</th>
                            <th>10 sf</th><th>100 sf</th><th>200 sf</th><th>500 sf</th>
                        </tr>
                    </thead>
                    <tbody>
                        {['Negative Zone 4', 'Negative Zone 5', 'Positive Zone 4 & 5'].map((zone, idx) => (
                            <tr key={idx}>
                                <td>{zone}</td>
                                <td>-1.17</td><td>-1.01</td><td>-0.96</td><td>-0.90</td>
                                <td>{calculatePress(-1.17, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-1.01, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-0.96, qh, wind.internalPressure).toFixed(1)}</td>
                                <td>{calculatePress(-0.90, qh, wind.internalPressure).toFixed(1)}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <div style={{ color: 'blue', fontSize: '0.85em', marginTop: '5px' }}>
                    Note: GCp reduced by 10% due to roof angle &lt;= 10 deg.
                </div>
            </div>

            {/* BOTTOM HORIZONTAL SURFACE OF ELEVATED BUILDINGS */}
            <div style={{ marginBottom: '30px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: '2px solid black', marginBottom: '5px' }}>
                    <h3>Bottom Horizontal Surface of Elevated Buildings</h3>
                </div>

                {/* Header for Elevated */}
                <div className="card" style={{ padding: '10px', background: '#e0f7fa', marginBottom: '15px' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px', fontSize: '0.9em' }}>
                        <div>
                            <div>Base pressure (qh) = {qh.toFixed(2)}</div>
                            <div>(Kd qh) = <strong>{(0.85 * qh).toFixed(1)} psf</strong></div>
                            <div>Wall width = <span style={{ color: 'red' }}>5.0 ft</span></div>
                        </div>
                        <div>
                            <div>h = {h.toFixed(1)} ft</div>
                            <div>hb = {buildingGeometry.hb.toFixed(1)} ft</div>
                        </div>
                        <div>
                            <div>0.2hb = {(0.2 * buildingGeometry.hb).toFixed(2)}</div>
                            <div>0.6hb = {(0.6 * buildingGeometry.hb).toFixed(2)}</div>
                            <div>ab = {(Math.max(0.04 * 5.0, 3)).toFixed(2)}</div>
                        </div>
                    </div>
                </div>

                <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                    <thead>
                        <tr>
                            <th rowSpan={2} style={{ textAlign: 'left' }}>Area</th>
                            <th colSpan={4}>GCp</th>
                            <th colSpan={4}>Surface Pressure (psf)</th>
                        </tr>
                        <tr>
                            <th>10 sf</th><th>100 sf</th><th>500 sf</th><th>1000 sf</th>
                            <th>10 sf</th><th>100 sf</th><th>500 sf</th><th>1000 sf</th>
                        </tr>
                    </thead>
                    <tbody>
                        {['Negative Zone 1', 'Negative Zone 1\'', 'Negative Zone 2', 'Negative Zone 3', 'Positive Zones 1-3', 'Negative Zone 4\'', 'Positive Zone 4\''].map((zone, idx) => (
                            <tr key={idx}>
                                <td>{zone}</td>
                                <td>-1.70</td><td>-1.29</td><td>-1.00</td><td>-1.00</td>
                                {/* Example calcs */}
                                <td>{calculatePress(-1.70, qh, 0).toFixed(1)}</td>
                                <td>{calculatePress(-1.29, qh, 0).toFixed(1)}</td>
                                <td>{calculatePress(-1.00, qh, 0).toFixed(1)}</td>
                                <td>{calculatePress(-1.00, qh, 0).toFixed(1)}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <div style={{ color: 'blue', fontSize: '0.85em', marginTop: '5px' }}>
                    Negative pressures are downward
                </div>
            </div>

            {/* Diagram for Bottom Surface */}
            <div style={{ textAlign: 'center', marginTop: '20px' }}>
                <div style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Building Bottom Plan: h ≤ 60' and alternate design 60' &lt; h &lt; 90'</div>
                {/* Placeholder for the complex diagram - simplified text or leave as future diagram task */}
                <div style={{ padding: '40px', border: '1px dashed #ccc', marginTop: '10px' }}>
                    [Diagram: Building Bottom Plan & Elevations would go here]
                </div>
            </div>




            <ComponentsCladdingZones a={a} h={h} leastWidth={buildingGeometry.leastWidth} />
        </div >
    );
};