import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';
import { calculateBearing } from '../../engine/bearing';
import { calculateAnchorage } from '../../engine/anchorage';

export const DetailedReport: React.FC = () => {
    const { geometry, materials, loads, anchorage } = useDesignStore();
    const bearing = calculateBearing(geometry, materials, loads);
    const anchor = calculateAnchorage(anchorage, materials, loads);

    return (
        <div className="report-container p-md">
            <div className="flex-row gap-lg">
                {/* Left Column */}
                <div className="flex-col gap-md flex-1">
                    <div>
                        <h4 className="text-green border-bottom mb-sm">GEOMETRY</h4>
                        <div className="grid-2-col">
                            <span>Column Section</span>
                            <span className="text-blue">{geometry.columnDetails.designation}</span>

                            <span>{geometry.plateShape === 'rectangular' ? 'Plate Width' : 'Plate Diameter'}</span>
                            <span className="text-blue">
                                {geometry.plateShape === 'rectangular' ? geometry.widthZ : geometry.diameter} in
                            </span>

                            <span>Support Width</span>
                            <span className="text-blue">{geometry.support.widthWp1} in</span>
                        </div>
                    </div>

                    <div>
                        <h4 className="text-green border-bottom mb-sm">FACTORED LOADS (LRFD)</h4>
                        <div className="grid-2-col">
                            <span>Vertical Load P</span>
                            <span className="text-blue">{loads.P} kip</span>

                            <span>Moment Mx</span>
                            <span className="text-blue">{loads.Mx} k-ft</span>

                            <span>Shear Vx</span>
                            <span className="text-blue">{loads.Vx} kip</span>
                        </div>
                    </div>

                    <div>
                        <h4 className="text-green border-bottom mb-sm">BEARING STRESSES</h4>
                        <div className="grid-2-col">
                            <span>Concrete Strength f'c</span>
                            <span className="text-blue">{materials.fc} ksi</span>

                            <span>Bearing Strength phiPpn</span>
                            <span className="text-blue">{bearing.phiPn.toFixed(1)} kip</span>

                            <span>Design Ratio</span>
                            <span className="text-blue">{bearing.bearingRatio.toFixed(2)} {bearing.isSafe ? '✓' : 'X'}</span>
                        </div>
                        {bearing.isSafe && <div className="text-red mt-sm italic">BEARING STRESSES ARE OK</div>}
                    </div>
                </div>

                {/* Right Column */}
                <div className="flex-col gap-md flex-1">
                    <div>
                        <h4 className="text-green border-bottom mb-sm">BASE PLATE DESIGN</h4>
                        <div className="grid-2-col">
                            <span>Steel Strength Fy</span>
                            <span className="text-blue">{materials.fy_plate} ksi</span>

                            <span>Thickness Required</span>
                            <span className="text-blue">0.00 in</span> {/* Placeholder for actual bending calc */}

                            <span>Use Plate Thickness</span>
                            <span className="text-blue">{geometry.thickness.toFixed(2)} in ✓</span>
                        </div>
                    </div>

                    <div>
                        <h4 className="text-green border-bottom mb-sm">ANCHORAGE DESIGN</h4>
                        <div className="grid-2-col">
                            <span>Anchor Rod Material</span>
                            <span className="text-blue">{anchorage.material}</span>

                            <span>Rod Size</span>
                            <span className="text-blue">{anchorage.count} rods, {anchorage.diameter}" diam.</span>

                            <span className="text-red underline mt-sm">Tension</span>
                            <span></span>

                            <span>Total Tension Force N</span>
                            <span className="text-blue">{(loads.P < 0 ? -loads.P : 0).toFixed(1)} kip</span>

                            <span>Tension Design Ratio</span>
                            <span className="text-blue">{anchor.tensionRatio.toFixed(2)} {anchor.tensionRatio <= 1.0 ? '✓' : 'X'}</span>

                            <span className="text-red underline mt-sm">Shear</span>
                            <span></span>

                            <span>Total Shear Force V</span>
                            <span className="text-blue">{Math.sqrt(loads.Vx ** 2 + loads.Vz ** 2).toFixed(1)} kip</span>

                            <span>Shear Design Ratio</span>
                            <span className="text-blue">{anchor.shearRatio.toFixed(2)} {anchor.shearRatio <= 1.0 ? '✓' : 'X'}</span>

                            <span className="text-red underline mt-sm">Interaction</span>
                            <span></span>

                            <span>Combined Stress Ratio</span>
                            <span className="text-blue">{anchor.interactionRatio.toFixed(2)} {anchor.isSafe ? '✓' : 'X'}</span>
                        </div>
                        {anchor.isSafe && <div className="text-red mt-sm italic">ANCHORAGE DESIGN IS OK</div>}
                    </div>
                </div>
            </div>

            <style>{`
        .report-container { font-family: monospace; font-size: 12px; }
        .text-green { color: #008000; font-weight: bold; }
        .text-blue { color: #0000FF; }
        .text-red { color: #FF0000; }
        .border-bottom { border-bottom: 1px solid #ccc; }
        .grid-2-col { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; }
        .flex-1 { flex: 1; }
        .gap-lg { gap: 32px; }
        .underline { text-decoration: underline; }
        .italic { font-style: italic; }
      `}</style>
        </div>
    );
};