import { usePileCapStore } from '../../store/pileCapStore';
import { OneWayShearDiagram } from '../diagrams/OneWayShearDiagram';

export const ResultsSummary = () => {
    const results = usePileCapStore(state => state.results);

    if (!results) {
        return (
            <div className="card">
                <div className="card-header">Results</div>
                <p className="text-muted">No calculation results available. Please enter design parameters.</p>
            </div>
        );
    }

    return (
        <div className="card">
            <div className="card-header">
                Design Summary: {results.overallPass ?
                    <span className="status-pass">✓ PASS</span> :
                    <span className="status-fail">✗ FAIL</span>
                }
            </div>
            <div className="card-header" style={{ fontSize: '14px', fontWeight: 'normal', marginTop: '-8px', marginBottom: '16px' }}>
                Governing Load: <strong>{results.governingCombination}</strong> (Case: {results.governingCaseId})
            </div>

            {/* Pile Reactions */}
            <div className="report-subsection">
                <div className="report-subsection-title">Pile Reactions</div>
                <div className="report-item">
                    <span className="report-label">Maximum Pile Reaction:</span>
                    <span className="report-value">{results.maxPileReaction.toFixed(2)} kips</span>
                </div>
                <div className="report-item">
                    <span className="report-label">Minimum Pile Reaction:</span>
                    <span className="report-value">{results.minPileReaction.toFixed(2)} kips</span>
                </div>
            </div>

            {/* Shear Checks */}
            <div className="report-subsection">
                <div className="report-subsection-title">Shear Checks</div>
                {results.shearChecks.map((check, index) => {
                    // Determine direction and location from check type string
                    // Expected format: "One-Way Shear X (at d)" or "One-Way Shear Y (at face)"
                    const isX = check.type.includes('X');
                    const isAtD = check.type.includes('at d');

                    // Calculate d (approximate)
                    const reinforcement = usePileCapStore.getState().reinforcement;
                    const geometry = usePileCapStore.getState().geometry;
                    // d = depth - cover - bar_diameter (approx 1 inch for bar center)
                    const cover = isX ? reinforcement.bottomConcreteCover : reinforcement.bottomConcreteCover; // Simplified
                    const d = geometry.depth - cover - 1;

                    return (
                        <div key={index} style={{ marginBottom: '12px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                            <div style={{ fontWeight: 600, marginBottom: '4px' }}>
                                {check.type}: {check.pass ?
                                    <span className="status-pass">✓ PASS</span> :
                                    <span className="status-fail">✗ FAIL</span>
                                }
                            </div>

                            {/* Diagram */}
                            <OneWayShearDiagram
                                direction={isX ? 'X' : 'Y'}
                                criticalSectionDist={isAtD ? d : 0}
                                piles={results.pileReactions}
                            />

                            <div className="report-item">
                                <span className="report-label">Demand:</span>
                                <span className="report-value">{(check.demand / 1000).toFixed(2)} kips</span>
                            </div>
                            <div className="report-item">
                                <span className="report-label">Capacity:</span>
                                <span className="report-value">{(check.capacity / 1000).toFixed(2)} kips</span>
                            </div>
                            <div className="report-item">
                                <span className="report-label">Ratio (D/C):</span>
                                <span className="report-value">{check.ratio.toFixed(3)}</span>
                            </div>
                        </div>
                    );
                })}
            </div>

            {/* Flexural Design */}
            {/* Flexural Design */}
            <div className="report-subsection">
                <div className="report-subsection-title">Flexural Reinforcement (Bottom Mat)</div>

                {/* X-Direction */}
                <div style={{ marginBottom: '16px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '8px', borderBottom: '1px solid #eee', paddingBottom: '4px' }}>
                        X-Direction: {results.flexuralX.pass ?
                            <span className="status-pass">✓ PASS</span> :
                            <span className="status-fail">✗ FAIL</span>
                        }
                    </div>
                    <div className="report-item">
                        <span className="report-label">Moment (Mu):</span>
                        <span className="report-value">{(results.flexuralX.moment).toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Required As (Strength):</span>
                        <span className="report-value">{results.flexuralX.requiredAs.toFixed(2)} in²</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Min As (ACI):</span>
                        <span className="report-value">{results.flexuralX.minAs.toFixed(2)} in²</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Provided As:</span>
                        <span className="report-value" style={{ fontWeight: 'bold' }}>
                            {results.flexuralX.providedAs.toFixed(2)} in²
                        </span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Reinforcement:</span>
                        <span className="report-value">
                            {results.flexuralX.barCount} {results.flexuralX.barSize} @ {results.flexuralX.spacing}" o.c.
                        </span>
                    </div>
                    <div className="report-item" style={{ marginTop: '4px' }}>
                        <span className="report-label">Development Length:</span>
                        <span className="report-value">
                            {results.flexuralX.developmentLength.pass ?
                                <span className="status-pass">OK</span> :
                                <span className="status-fail">FAIL</span>
                            }
                            {' '}(Req: {results.flexuralX.developmentLength.required.toFixed(1)}", Avail: {results.flexuralX.developmentLength.available.toFixed(1)}")
                        </span>
                    </div>
                </div>

                {/* Y-Direction */}
                <div style={{ marginBottom: '12px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '8px', borderBottom: '1px solid #eee', paddingBottom: '4px' }}>
                        Y-Direction: {results.flexuralY.pass ?
                            <span className="status-pass">✓ PASS</span> :
                            <span className="status-fail">✗ FAIL</span>
                        }
                    </div>
                    <div className="report-item">
                        <span className="report-label">Moment (Mu):</span>
                        <span className="report-value">{(results.flexuralY.moment).toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Required As (Strength):</span>
                        <span className="report-value">{results.flexuralY.requiredAs.toFixed(2)} in²</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Min As (ACI):</span>
                        <span className="report-value">{results.flexuralY.minAs.toFixed(2)} in²</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Provided As:</span>
                        <span className="report-value" style={{ fontWeight: 'bold' }}>
                            {results.flexuralY.providedAs.toFixed(2)} in²
                        </span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Reinforcement:</span>
                        <span className="report-value">
                            {results.flexuralY.barCount} {results.flexuralY.barSize} @ {results.flexuralY.spacing}" o.c.
                        </span>
                    </div>
                    <div className="report-item" style={{ marginTop: '4px' }}>
                        <span className="report-label">Development Length:</span>
                        <span className="report-value">
                            {results.flexuralY.developmentLength.pass ?
                                <span className="status-pass">OK</span> :
                                <span className="status-fail">FAIL</span>
                            }
                            {' '}(Req: {results.flexuralY.developmentLength.required.toFixed(1)}", Avail: {results.flexuralY.developmentLength.available.toFixed(1)}")
                        </span>
                    </div>
                </div>
            </div>

            {/* Bearing Checks */}
            <div className="report-subsection">
                <div className="report-subsection-title">Load Transfer (Bearing)</div>

                {/* Column Bearing */}
                <div style={{ marginBottom: '12px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '4px' }}>
                        Column Bearing: {results.bearingChecks.columnBearing.pass ?
                            <span className="status-pass">✓ PASS</span> :
                            <span className="status-fail">✗ FAIL</span>
                        }
                    </div>
                    <div className="report-item">
                        <span className="report-label">Demand (Pu):</span>
                        <span className="report-value">{results.bearingChecks.columnBearing.demand.toFixed(2)} kips</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Capacity (phi*Bn):</span>
                        <span className="report-value">{results.bearingChecks.columnBearing.capacity.toFixed(2)} kips</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Ratio:</span>
                        <span className="report-value">{results.bearingChecks.columnBearing.ratio.toFixed(3)}</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Required Dowels:</span>
                        <span className="report-value">{results.bearingChecks.columnBearing.requiredDowels.toFixed(2)} in²</span>
                    </div>
                </div>

                {/* Pile Bearing */}
                <div style={{ marginBottom: '12px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '4px' }}>
                        Pile Bearing: {results.bearingChecks.pileBearing.pass ?
                            <span className="status-pass">✓ PASS</span> :
                            <span className="status-fail">✗ FAIL</span>
                        }
                    </div>
                    <div className="report-item">
                        <span className="report-label">Max Pile Reaction:</span>
                        <span className="report-value">{results.bearingChecks.pileBearing.demand.toFixed(2)} kips</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Capacity (phi*Bn):</span>
                        <span className="report-value">{results.bearingChecks.pileBearing.capacity.toFixed(2)} kips</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Ratio:</span>
                        <span className="report-value">{results.bearingChecks.pileBearing.ratio.toFixed(3)}</span>
                    </div>
                </div>
            </div>



            {/* Column Design */}
            <div className="report-subsection">
                <div className="report-subsection-title">Column Design (Biaxial Interaction)</div>
                <div style={{ marginBottom: '12px', padding: '8px', background: '#f9f9f9', borderRadius: '4px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '4px' }}>
                        Interaction Check: {results.columnDesign.pass ?
                            <span className="status-pass">✓ PASS</span> :
                            <span className="status-fail">✗ FAIL</span>
                        }
                    </div>
                    <div className="report-item">
                        <span className="report-label">Axial Load (Pu):</span>
                        <span className="report-value">{results.columnDesign.axialLoad.toFixed(2)} kips</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Moment X (Mux):</span>
                        <span className="report-value">{results.columnDesign.demandX.toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Capacity X (phi*Mnx):</span>
                        <span className="report-value">{results.columnDesign.capacityX.toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Moment Y (Muy):</span>
                        <span className="report-value">{results.columnDesign.demandY.toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Capacity Y (phi*Mny):</span>
                        <span className="report-value">{results.columnDesign.capacityY.toFixed(2)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Interaction Ratio:</span>
                        <span className="report-value">{results.columnDesign.ratio.toFixed(3)}</span>
                    </div>
                    <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                        * Simplified linear interaction check: (Mux/phiMnx) + (Muy/phiMny) ≤ 1.0
                    </div>
                </div>
            </div>

            {/* Pile Reactions Table */}
            <div className="report-subsection">
                <div className="report-subsection-title">Individual Pile Reactions</div>
                <table>
                    <thead>
                        <tr>
                            <th>Pile #</th>
                            <th>X (ft)</th>
                            <th>Y (ft)</th>
                            <th>Reaction (kips)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {results.pileReactions.map((pile) => (
                            <tr key={pile.pileNumber}>
                                <td className="text-center">{pile.pileNumber}</td>
                                <td className="text-center">{pile.x.toFixed(2)}</td>
                                <td className="text-center">{pile.y.toFixed(2)}</td>
                                <td className="text-center">{pile.reaction.toFixed(2)}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div >
    );
};