import React from 'react';
import { useBeamStore } from '../../store/useBeamStore';

export const DetailedReport: React.FC = () => {
    const { steel, geometry, concrete, composite, lateralBracing, results } = useBeamStore();

    if (!results) {
        return (
            <div className="card">
                <div style={{ padding: '40px', textAlign: 'center', color: '#999' }}>
                    Click "Calculate Design" to generate results
                </div>
            </div>
        );
    }

    return (
        <div className="card">
            <h2 style={{ marginBottom: '24px', color: '#333' }}>Design Report</h2>

            {/* GEOMETRY Section */}
            <div className="report-section">
                <div className="report-section-title" style={{ color: '#107c10' }}>GEOMETRY</div>

                <div className="flex-row gap-lg">
                    <div style={{ flex: 1 }}>
                        <div className="report-item">
                            <span className="report-label">Beam Designation</span>
                            <span className="report-value">{steel.designation}</span>
                        </div>
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginTop: '12px' }}>
                    <div>
                        <h4 style={{ color: '#666', marginBottom: '8px' }}>Span / Length</h4>
                        {geometry.spans.map((span) => (
                            <div key={span.id} className="report-item">
                                <span className="report-label">Span {span.id}</span>
                                <span className="report-value">{span.length.toFixed(2)} ft <span className="checkmark">✓</span></span>
                            </div>
                        ))}
                    </div>

                    <div>
                        <h4 style={{ color: '#666', marginBottom: '8px' }}>Support / Type</h4>
                        {geometry.supports.map((support) => (
                            <div key={support.id} className="report-item">
                                <span className="report-label">Support {support.id}</span>
                                <span className="report-value" style={{ color: '#0078d4' }}>{support.type}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* SLAB AND DECK Section */}
            {composite.isComposite && (
                <div className="report-section">
                    <div className="report-section-title" style={{ color: '#107c10' }}>SLAB AND DECK</div>

                    <div className="report-item">
                        <span className="report-label">Overall Slab Thickness</span>
                        <span className="report-value">{concrete.slabThickness} in <span className="checkmark">✓</span></span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Concrete Strength f'c</span>
                        <span className="report-value">{concrete.fc} psi <span className="checkmark">✓</span></span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Metal Deck Type</span>
                        <span className="report-value">{composite.metalDeck.manufacturer} {composite.metalDeck.type} - {composite.metalDeck.orientation}</span>
                    </div>
                </div>
            )}

            {/* DEFLECTIONS Section */}
            <div className="report-section">
                <div className="report-section-title" style={{ color: '#107c10' }}>DEFLECTIONS</div>

                <div className="report-subsection">
                    <div className="report-subsection-title">Stiffness factor</div>
                    <div className="report-item">
                        <span className="report-value">{steel.useStiffnessFactor ? '0.8' : '1.0'}</span>
                    </div>
                </div>

                <div className="report-subsection">
                    <div className="report-subsection-title">Required Camber</div>
                    <div className="report-item">
                        <span className="report-value">0.00 in</span>
                    </div>
                </div>

                <div className="report-subsection">
                    <div className="report-subsection-title">Long-term Deflection</div>
                    <div className="report-item">
                        <span className="report-value">0.08 in</span>
                    </div>
                </div>

                <table style={{ marginTop: '12px', fontSize: '12px' }}>
                    <thead>
                        <tr>
                            <th>Loading</th>
                            <th>δ (in)</th>
                            <th>L/δ</th>
                            <th>L/δ Min</th>
                            <th>Ratio</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {results.deflections.map((deflection, index) => (
                            <tr key={index}>
                                <td>{deflection.loadCase}</td>
                                <td className="text-right">{deflection.deflection.toFixed(2)}</td>
                                <td className="text-right">{deflection.lOverD}</td>
                                <td className="text-right">{deflection.limit}</td>
                                <td className="text-right">{deflection.ratio.toFixed(2)}</td>
                                <td className="checkmark">✓</td>
                            </tr>
                        ))}
                    </tbody>
                </table>

                <div style={{ marginTop: '12px', color: '#d13438', fontWeight: 600 }}>
                    DEFLECTION DESIGN IS OK
                </div>
            </div>

            {/* DESIGN FOR SHEAR Section */}
            <div className="report-section">
                <div className="report-section-title" style={{ color: '#107c10' }}>DESIGN FOR SHEAR</div>

                <div className="report-item">
                    <span className="report-label">Shear Coefficient Cv</span>
                    <span className="report-value">{results.shear.cv.toFixed(2)}</span>
                </div>
                <div className="report-item">
                    <span className="report-label">Maximum Shear Force V</span>
                    <span className="report-value">{results.shear.maxShear.toFixed(1)} kip</span>
                </div>
                <div className="report-item">
                    <span className="report-label">Design Strength φVn</span>
                    <span className="report-value">{results.shear.designStrength.toFixed(1)} kip</span>
                </div>
                <div className="report-item">
                    <span className="report-label">V / φVn Design Ratio</span>
                    <span className="report-value">{results.shear.ratio.toFixed(2)} <span className="checkmark">✓</span></span>
                </div>

                <div style={{ marginTop: '12px', color: '#d13438', fontWeight: 600 }}>
                    SHEAR DESIGN IS OK
                </div>
            </div>

            {/* FLEXURE (NON-COMPOSITE) Section */}
            <div className="report-section">
                <div className="report-section-title" style={{ color: '#107c10' }}>FLEXURE (NON-COMPOSITE)</div>

                <div className="report-subsection">
                    <div className="report-subsection-title">- Construction loads</div>

                    <div className="report-item">
                        <span className="report-label">Lateral Bracing</span>
                        <span className="report-value">{lateralBracing.type}</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Max. Bending Moment M</span>
                        <span className="report-value">{results.flexureNonComposite.maxMoment.toFixed(1)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">L. T. Buckling Cb-factor</span>
                        <span className="report-value">{results.flexureNonComposite.cbFactor.toFixed(2)}</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Design Strength φMn</span>
                        <span className="report-value">{results.flexureNonComposite.designStrength.toFixed(1)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">M / φMn Design Ratio</span>
                        <span className="report-value">{results.flexureNonComposite.ratio.toFixed(2)} <span className="checkmark">✓</span></span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Controlling Limit State</span>
                        <span className="report-value">{results.flexureNonComposite.limitState}</span>
                    </div>
                </div>

                <div style={{ marginTop: '12px', color: '#d13438', fontWeight: 600 }}>
                    FLEXURE DESIGN IS OK
                </div>
            </div>

            {/* FLEXURE (COMPOSITE) Section */}
            {composite.isComposite && results.flexureComposite && (
                <div className="report-section">
                    <div className="report-section-title" style={{ color: '#107c10' }}>FLEXURE (COMPOSITE)</div>

                    <div className="report-item">
                        <span className="report-label">Shear Stud Length</span>
                        <span className="report-value">{results.flexureComposite.shearStudLength.toFixed(1)} in <span className="checkmark">✓</span></span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Reqd. # of 3/4" Shear Connectors</span>
                        <span className="report-value">{results.flexureComposite.requiredStuds} <span className="checkmark">✓</span></span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">% of Full Composite Action</span>
                        <span className="report-value">{results.flexureComposite.partialComposite} %</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Max. Bending Moment M</span>
                        <span className="report-value">{results.flexureComposite.maxMoment.toFixed(1)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">Design Strength φMn</span>
                        <span className="report-value">{results.flexureComposite.designStrength.toFixed(1)} k-ft</span>
                    </div>
                    <div className="report-item">
                        <span className="report-label">M / φMn Design Ratio</span>
                        <span className="report-value">{results.flexureComposite.ratio.toFixed(2)} <span className="checkmark">✓</span></span>
                    </div>

                    <div style={{ marginTop: '12px', color: '#d13438', fontWeight: 600 }}>
                        COMPOSITE DESIGN IS OK
                    </div>
                </div>
            )}

            {/* DESIGN CODES Section */}
            <div className="report-section">
                <div className="report-section-title">DESIGN CODES</div>

                <div className="report-item">
                    <span className="report-label">Steel Design</span>
                    <span className="report-value" style={{ color: '#0078d4' }}>AISC 360-16</span>
                </div>
                <div className="report-item">
                    <span className="report-label">Load Combinations</span>
                    <span className="report-value" style={{ color: '#0078d4' }}>ASCE 7-16/10</span>
                </div>
            </div>
        </div>
    );
};