import { useConnectionStore } from '../../store/connectionStore';

export const ResultsSummary = () => {
    const { support, beam, angle: _angle, materials, loads, limitStates, loadCombinations, geometryChecks, designCheck, designMethod: _designMethod, bolts, weld } = useConnectionStore();

    return (
        <div className="card">
            <div className="results-grid">
                {/* GEOMETRY Section */}
                <div className="report-section">
                    <div className="report-section-title">GEOMETRY</div>
                    <div className="report-item">
                        <span className="report-label">Connection Type ......................</span>
                        <span className="report-value" style={{ color: 'var(--primary-blue)' }}>Double-Angle</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Support Designation .................</span>
                        <span className="report-value" style={{ color: 'var(--primary-blue)' }}>{support.designation}</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Support Type ..............................</span>
                        <span className="report-value" style={{ color: support.type === 'column-flange' ? 'var(--error-red)' : 'var(--primary-blue)' }}>
                            {support.type === 'column-flange' ? 'Column-Flange' : support.type} {support.type === 'column-flange' && <span className="status-fail">NG</span>}
                        </span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Beam Designation ....................</span>
                        <span className="report-value" style={{ color: 'var(--primary-blue)' }}>{beam.designation}</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Beam Gap from Support ..........</span>
                        <span className="report-value">{beam.gapFromSupport.toFixed(2)} in <span className="status-pass">OK</span></span>
                    </div>

                    {geometryChecks.map((check, idx) => (
                        <div key={idx} className="report-item">
                            <span className="report-label">{check.description}</span>
                            <span className="report-value">
                                {check.lengthC && `${check.lengthC} `}
                                {check.heightDc && `${check.heightDc} `}
                                <span className={check.status === 'OK' ? 'status-pass' : 'status-fail'}>{check.status}</span>
                            </span>
                        </div>
                    ))}
                </div>

                {/* MATERIALS Section */}
                <div className="report-section">
                    <div className="report-section-title">MATERIALS</div>
                    <table style={{ fontSize: '11px', marginBottom: '12px' }}>
                        <thead>
                            <tr>
                                <th></th>
                                <th className="text-center" style={{ color: 'var(--error-red)' }}>Yield Fy</th>
                                <th className="text-center" style={{ color: 'var(--error-red)' }}>Tensile Fu</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Support ........</td>
                                <td className="text-center">{materials.support.fy.toFixed(1)}</td>
                                <td className="text-center">{materials.support.fu.toFixed(1)}</td>
                                <td>ksi</td>
                            </tr>
                            <tr>
                                <td>Beam ............</td>
                                <td className="text-center">{materials.beam.fy.toFixed(1)}</td>
                                <td className="text-center">{materials.beam.fu.toFixed(1)}</td>
                                <td>ksi</td>
                            </tr>
                            <tr>
                                <td>Angle ............</td>
                                <td className="text-center">{materials.angle.fy.toFixed(1)}</td>
                                <td className="text-center">{materials.angle.fu.toFixed(1)}</td>
                                <td>ksi</td>
                            </tr>
                        </tbody>
                    </table>

                    <div style={{ fontSize: '11px', marginBottom: '8px' }}>
                        <span className="report-label">Modulus of Elasticity ........</span>
                        <span className="report-value" style={{ marginLeft: '8px' }}>{materials.modulusOfElasticity}</span>
                        <span style={{ marginLeft: '4px' }}>ksi</span>
                    </div>

                    <div style={{ fontSize: '11px', marginBottom: '8px', color: 'var(--primary-blue)' }}>
                        Use {bolts.numberOfRows} Rows of {bolts.diameter}" diam {bolts.grade} Bolts @ {bolts.spacing.toFixed(1)} in
                    </div>

                    <div style={{ fontSize: '11px', marginBottom: '8px', color: 'var(--primary-blue)' }}>
                        Use {weld.size}" {weld.type} weld <span style={{ marginLeft: '16px' }}>Strength = {weld.strength.toFixed(1)} ksi</span>
                    </div>

                    <div className="report-section-title" style={{ marginTop: '16px' }}>DESIGN CODES</div>
                    <div style={{ fontSize: '11px' }}>
                        <div>Steel Design ..................<span style={{ marginLeft: '24px', color: 'var(--primary-blue)' }}>AISC 360-16</span></div>
                        <div>Load Combinations ........<span style={{ marginLeft: '24px', color: 'var(--primary-blue)' }}>ASCE 7-10/16</span></div>
                    </div>
                </div>
            </div>

            {/* UNFACTORED LOADS */}
            <div className="report-section" style={{ marginTop: '24px' }}>
                <div className="report-section-title">UNFACTORED LOADS</div>
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Dead</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Live</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>RLive</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Snow</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Wind</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Seismic</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Vertical Load P ..............</td>
                            <td className="text-center">{loads.dead.toFixed(1)}</td>
                            <td className="text-center">{loads.live.toFixed(1)}</td>
                            <td className="text-center">{loads.rLive.toFixed(1)}</td>
                            <td className="text-center">{loads.snow.toFixed(1)}</td>
                            <td className="text-center">{loads.wind.toFixed(1)}</td>
                            <td className="text-center">{loads.seismic.toFixed(1)}</td>
                            <td>kip</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {/* CONNECTION STRENGTH */}
            <div className="report-section" style={{ marginTop: '24px' }}>
                <div className="report-section-title">CONNECTION STRENGTH (kip)</div>
                <table>
                    <thead>
                        <tr>
                            <th>Limit States</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>φ</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Rn</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>φRn</th>
                        </tr>
                    </thead>
                    <tbody>
                        {limitStates.map((ls, idx) => (
                            <tr key={idx} style={{ color: ls.applicable ? 'inherit' : '#ccc' }}>
                                <td>{ls.name} ..........................</td>
                                <td className="text-center">{ls.applicable ? ls.phi.toFixed(2) : 'N.A.'}</td>
                                <td className="text-center">{ls.applicable ? ls.rn.toFixed(1) : 'N.A.'}</td>
                                <td className="text-center">
                                    {ls.applicable ? (
                                        <>
                                            {ls.phiRn.toFixed(1)} kip {ls.phiRn > 20 && <span className="checkmark">✓</span>}
                                        </>
                                    ) : (
                                        'N.A.'
                                    )}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            {/* COMBINED LOADS */}
            <div className="report-section" style={{ marginTop: '24px' }}>
                <div className="report-section-title">COMBINED LOADS (kip)</div>
                <table>
                    <thead>
                        <tr>
                            <th style={{ width: '40px' }}></th>
                            <th>Load Combination</th>
                            <th className="text-center" style={{ color: 'var(--error-red)' }}>Pu</th>
                        </tr>
                    </thead>
                    <tbody>
                        {loadCombinations.map((lc) => (
                            <tr key={lc.id}>
                                <td className="text-center">Ⓒ{lc.id}</td>
                                <td>{lc.equation}</td>
                                <td className="text-center">
                                    {lc.pu.toFixed(1)} <span className={lc.passes ? 'status-pass' : 'status-fail'}>{lc.passes ? 'OK' : 'NG'}</span> {lc.passes && <span className="checkmark">✓</span>}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            {/* DESIGN CHECKS */}
            <div className="report-section" style={{ marginTop: '24px' }}>
                <div className="report-section-title">DESIGN CHECKS</div>
                <div style={{ padding: '12px 0' }}>
                    <div className="report-item">
                        <span>Geometric Constraints Check ...............</span>
                        <span className={designCheck.geometricConstraintsCheck === 'OK' ? 'status-pass' : 'status-fail'}>
                            {designCheck.geometricConstraintsCheck} {designCheck.geometricConstraintsCheck === 'OK' ? '✓' : '✗'}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
};