import { useWindStore } from '../../store/windStore';

export const ResultsSummary = () => {
    const { results } = useWindStore();

    if (!results) return null;

    return (
        <>
            <div className="card report-section">
                <div className="report-section-title">Wind Parameters</div>
                <div className="results-grid">
                    <div>
                        <div className="report-item">
                            <span className="report-label">Calculation Type</span>
                            <span className="report-value">MWFRS (Envelope Procedure)</span>
                        </div>
                        <div className="report-item">
                            <span className="report-label">Basic wind speed V</span>
                            <span className="report-value text-error">{useWindStore.getState().inputs.parameters.basicWindSpeed} mph</span>
                        </div>
                    </div>
                    <div>
                        <div className="report-item">
                            <span className="report-label">Exposure Category</span>
                            <span className="report-value text-error"> {useWindStore.getState().inputs.parameters.exposureCategory} </span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="card report-section">
                <div className="report-section-title">Velocity Pressure qh</div>
                <div className="results-grid">
                    <div>
                        <div className="report-item">
                            <span className="report-label">Velocity pressure exposure coefficient Kh</span>
                            <span className="report-value">{results.kh.toFixed(2)}</span>
                        </div>
                        <div className="report-item">
                            <span className="report-label">Velocity pressure qh</span>
                            <span className="report-value">{results.qh.toFixed(1)} psf</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="card report-section">
                <div className="report-section-title">Pressure Coefficients</div>
                <div className="report-subsection">
                    <div className="report-subsection-title">Internal Pressure Coefficients (GCpi)</div>
                    <div className="flex-row gap-lg">
                        <div className="report-item gap-md">
                            <span className="report-label">Positive +GCpi</span>
                            <span className="report-value">{results.gcpi.positive}</span>
                        </div>
                        <div className="report-item gap-md">
                            <span className="report-label">Negative -GCpi</span>
                            <span className="report-value">{results.gcpi.negative}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="card report-section">
                <div className="report-section-title">MWFRS Wind Load Case 1 & 2</div>
                <div className="flex-row gap-lg wrap">
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Case 1 (Transverse)</div>
                        <LoadCaseTable data={results.loadCase1} />
                    </div>
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Case 2 (Longitudinal)</div>
                        <LoadCaseTable data={results.loadCase2} />
                    </div>
                </div>
            </div>

            <div className="card report-section">
                <div className="report-section-title">MWFRS Wind Load Case 3 & 4 (Torsion)</div>
                <div className="flex-row gap-lg wrap">
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Case 3 (Torsion Case 1)</div>
                        <LoadCaseTable data={results.loadCase3} />
                    </div>
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Case 4 (Torsion Case 2)</div>
                        <LoadCaseTable data={results.loadCase4} />
                    </div>
                </div>
            </div>

            <div className="card report-section">
                <div className="report-section-title">Components & Cladding</div>
                <div className="flex-row gap-lg wrap">
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Roof C&C</div>
                        <CCTable data={results.ccRoofPressures} />
                    </div>
                    <div className="report-subsection" style={{ flex: 1 }}>
                        <div className="report-subsection-title">Wall C&C</div>
                        <CCTable data={results.ccWallPressures} />
                    </div>
                </div>
            </div>
        </>
    );
};

const LoadCaseTable = ({ data }: { data: any }) => {
    if (!data) return null;
    return (
        <table className="results-table">
            <thead>
                <tr>
                    <th>Zone</th>
                    <th>GCpf</th>
                    <th>+GCpi</th>
                    <th>-GCpi</th>
                </tr>
            </thead>
            <tbody>
                {Object.entries(data).map(([zone, val]: [string, any]) => (
                    <tr key={zone}>
                        <td>{zone}</td>
                        <td>{val.gcpf?.toFixed(2)}</td>
                        <td>{val.positive.toFixed(1)}</td>
                        <td>{val.negative.toFixed(1)}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};

const CCTable = ({ data }: { data: any }) => {
    if (!data) return null;
    return (
        <table className="results-table">
            <thead>
                <tr>
                    <th>Zone</th>
                    <th>Max Pos</th>
                    <th>Max Neg</th>
                </tr>
            </thead>
            <tbody>
                {Object.entries(data).map(([zone, val]: [string, any]) => (
                    <tr key={zone}>
                        <td>{zone}</td>
                        <td>{val.positive.toFixed(1)}</td>
                        <td>{val.negative.toFixed(1)}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};