import React, { useState } from 'react';

export const SeismicDiaphragmSheet: React.FC = () => {
    // Shared inputs / Constants
    const [parallel, setParallel] = useState({
        V: 30, // kips
        levels: [
            { id: 'Roof', name: 'Roof', cvx: 0.491, wi: 75 }, // Wi from screenshot
            { id: '2', name: '2', cvx: 0.509, wi: 250 },
            { id: '1', name: '1', cvx: 0.000, wi: 0 },
            { id: 'Base', name: 'Base', cvx: 1.000, wi: 0 }, // For sum check
        ]
    });

    const [normal, setNormal] = useState({
        V: 46, // kips
        levels: [
            { id: 'Roof', name: 'Roof', cvx: 0.543, wi: 132 },
            { id: '2', name: '2', cvx: 0.457, wi: 381 },
            { id: '1', name: '1', cvx: 0.000, wi: 0 },
            { id: 'Base', name: 'Base', cvx: 1.000, wi: 0 },
        ]
    });

    // Min/Max Factors
    const sds = 0.527; // Placeholder or passed prop
    const ie = 1.25;
    const fpxMinCoeff = 0.2 * sds * ie;
    const fpxMaxCoeff = 0.4 * sds * ie;

    // Calculation Helper
    const calculateTable = (V: number, rows: typeof parallel.levels) => {
        return rows.map(r => {
            const fx = r.cvx * V; // Fx = Cvx * V
            return { ...r, fx };
        });
    };

    // Process Accumulation
    const processFpx = (rowsWithFx: any[]) => {
        // Need to iterate from Roof down?
        // Actually table order is Roof, 2, 1, Base.
        // Fpx accumulation logic:

        return rowsWithFx.map((r, i) => {
            // For accumulated sums, we need to sum from 0 to i?
            // Sum(Fi) / Sum(wi)
            let sumFi = 0;
            let sumWi = 0;
            for (let j = 0; j <= i; j++) {
                // Assuming rows[0] is Roof (top)
                sumFi += rowsWithFx[j].fx;
                sumWi += rowsWithFx[j].wi;
            }

            // Fpx = (sumFi / sumWi) * wpx
            // wpx is r.wi
            const fpx_calc = sumWi > 0 ? (sumFi / sumWi) * r.wi : 0;

            // Check Limits
            const fpx_min = fpxMinCoeff * r.wi;
            const fpx_max = fpxMaxCoeff * r.wi;

            const design_fpx = Math.max(Math.min(fpx_calc, fpx_max), fpx_min);

            return { ...r, sumFi, sumWi, fpx: fpx_calc, design: design_fpx };
        });
    };

    const parallelResults = processFpx(calculateTable(parallel.V, parallel.levels));
    const normalResults = processFpx(calculateTable(normal.V, normal.levels));


    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>Diaphragm Forces excluding parallel exterior walls</h2>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                {/* Parallel Table */}
                <div>
                    <h3>Diaphragm Force Fpx Parallel to Bldg Length V= <input type="number" value={parallel.V} onChange={(e) => setParallel({ ...parallel, V: parseFloat(e.target.value) })} style={{ width: '50px' }} />k</h3>
                    <table style={{ width: '100%', fontSize: '0.8em', borderCollapse: 'collapse', textAlign: 'center', border: '1px solid black' }}>
                        <thead style={{ background: '#eee', borderBottom: '1px solid black' }}>
                            <tr>
                                <th>Level</th><th>Cvx</th><th>Fx</th><th>Sum Fx</th><th>Sum Wi</th><th>Fpx</th><th>Design Fpx</th>
                            </tr>
                        </thead>
                        <tbody>
                            {parallelResults.map((r, i) => (
                                <tr key={i} style={{ borderBottom: '1px solid #ccc' }}>
                                    <td>{r.name}</td>
                                    <td><input type="number" value={r.cvx} step="0.001" onChange={(e) => {
                                        const newL = [...parallel.levels];
                                        newL[i].cvx = parseFloat(e.target.value);
                                        setParallel({ ...parallel, levels: newL });
                                    }} style={{ width: '50px' }} /></td>
                                    <td>{r.fx.toFixed(2)}</td>
                                    <td>{r.sumFi.toFixed(1)}</td>
                                    <td><input type="number" value={r.wi} onChange={(e) => {
                                        const newL = [...parallel.levels];
                                        newL[i].wi = parseFloat(e.target.value);
                                        setParallel({ ...parallel, levels: newL });
                                    }} style={{ width: '50px' }} /></td>
                                    <td>{r.fpx.toFixed(1)}</td>
                                    <td><strong>{r.design.toFixed(1)}</strong></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {/* Normal Table */}
                <div>
                    <h3>Diaphragm Force Fpx Normal to Bldg Length V= <input type="number" value={normal.V} onChange={(e) => setNormal({ ...normal, V: parseFloat(e.target.value) })} style={{ width: '50px' }} />k</h3>
                    <table style={{ width: '100%', fontSize: '0.8em', borderCollapse: 'collapse', textAlign: 'center', border: '1px solid black' }}>
                        <thead style={{ background: '#eee', borderBottom: '1px solid black' }}>
                            <tr>
                                <th>Level</th><th>Cvx</th><th>Fx</th><th>Sum Fx</th><th>Sum Wi</th><th>Fpx</th><th>Design Fpx</th>
                            </tr>
                        </thead>
                        <tbody>
                            {normalResults.map((r, i) => (
                                <tr key={i} style={{ borderBottom: '1px solid #ccc' }}>
                                    <td>{r.name}</td>
                                    <td><input type="number" value={r.cvx} step="0.001" onChange={(e) => {
                                        const newL = [...normal.levels];
                                        newL[i].cvx = parseFloat(e.target.value);
                                        setNormal({ ...normal, levels: newL });
                                    }} style={{ width: '50px' }} /></td>
                                    <td>{r.fx.toFixed(2)}</td>
                                    <td>{r.sumFi.toFixed(1)}</td>
                                    <td><input type="number" value={r.wi} onChange={(e) => {
                                        const newL = [...normal.levels];
                                        newL[i].wi = parseFloat(e.target.value);
                                        setNormal({ ...normal, levels: newL });
                                    }} style={{ width: '50px' }} /></td>
                                    <td>{r.fpx.toFixed(1)}</td>
                                    <td><strong>{r.design.toFixed(1)}</strong></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            <div style={{ marginTop: '20px', border: '1px solid black', padding: '10px', background: '#e0e0e0' }}>
                <h4>User Overrides at each level in addition to above</h4>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                    <div>
                        <h5>Parallel to Bldg Length</h5>
                        {/* Placeholder Inputs */}
                        <div>Adjust ps weight | Adjust wt in kips</div>
                    </div>
                    <div>
                        <h5>Normal to Bldg Length</h5>
                        {/* Placeholder Inputs */}
                        <div>Adjust psf weight | Adjust wt in kips</div>
                    </div>
                </div>
            </div>

        </div>
    );
};