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

interface WallPressureProps {
    qh: number;
    h: number;
    G: number;
    GCpi: number;
}

export const WallPressureTable: React.FC<WallPressureProps> = ({ qh, h, G, GCpi }) => {
    const { buildingGeometry, wind } = useCalculatorStore();
    const exposure = wind.exposure;

    // We generate rows for 0-15', then maybe h, ridge?
    // Screenshot shows:
    // 0 to 15'
    // 20.0 ft
    // h = 24.0 ft
    // ridge = 24.1 ft

    // We should compute these steps dynamically.
    const steps = [15];
    if (h > 15) steps.push(h);
    if (buildingGeometry.meanRoofHeight > h) steps.push(buildingGeometry.meanRoofHeight); // Ridge?

    const rows = steps.map(z => {
        const kz = getKz(z, exposure);
        const kzt = 1.0; // factor
        // qz = 0.00256 * Kz * Kzt * Kd * V^2
        // But we have qh passed in. qz approx qh * (Kz_z / Kz_h).
        // Let's recompute qz directly
        const qz = 0.00256 * kz * kzt * wind.directionality * Math.pow(wind.speed, 2);

        // qGCp
        const Cp_ww = 0.8;
        const qGCp = qz * G * Cp_ww;

        // Combined: w/+qiGCpi and w/-qiGCpi
        const qiGCpi = qh * GCpi; // Use qh for internal pressure

        // Combined WW + LW
        // To Ridge: 23.4 (Screenshot). Needs Leeward Wall pressure at roof height?
        // This column "Combined WW + LW" implies adding Leeward suction?
        // Leeward wall suction q_LW = qh * G * Cp_LW.

        return {
            z,
            kz,
            kzt,
            qGCp,
            w_plus: qGCp + qiGCpi,
            w_minus: qGCp - qiGCpi
        };
    });

    return (
        <div style={{ marginBottom: '20px' }}>
            <div className="report-section-title" style={{ fontSize: '1em', marginTop: '10px' }}>Windward Wall Pressures at "z" (psf)</div>
            <table className="analysis-table" style={{ width: '100%', fontSize: '0.85em' }}>
                <thead>
                    <tr style={{ background: '#f0f0f0' }}>
                        <th>z</th>
                        <th>Kz</th>
                        <th>Kzt</th>
                        <th>qGCp</th>
                        <th>w/+qGCpi</th>
                        <th>w/-qGCpi</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>0 to 15'</td>
                        <td>0.85</td>
                        <td>1.00</td>
                        <td>--</td>
                        <td>--</td>
                        <td>--</td>
                    </tr>
                    {rows.map((r, i) => (
                        <tr key={i}>
                            <td>{r.z.toFixed(1)} ft</td>
                            <td>{r.kz.toFixed(2)}</td>
                            <td>{r.kzt.toFixed(2)}</td>
                            <td>{r.qGCp.toFixed(1)}</td>
                            <td>{r.w_plus.toFixed(1)}</td>
                            <td>{r.w_minus.toFixed(1)}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};