import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';
import { calculateBearing } from '../../engine/bearing';
import { calculateAnchorage } from '../../engine/anchorage';
import { Check, X } from 'lucide-react';

export const ResultsSummary: React.FC = () => {
    const { geometry, materials, loads, anchorage } = useDesignStore();

    const bearingResults = calculateBearing(geometry, materials, loads);
    const anchorageResults = calculateAnchorage(anchorage, materials, loads);

    const StatusIcon = ({ isSafe }: { isSafe: boolean }) => (
        isSafe ? <Check size={16} color="green" /> : <X size={16} color="red" />
    );

    return (
        <div>
            <h3 className="mb-md">Design Ratios</h3>

            <div className="flex-col gap-sm">
                {/* Bearing */}
                <div className="flex-row justify-between align-center border-bottom pb-sm">
                    <span>Bearing Stress</span>
                    <div className="flex-row gap-sm align-center">
                        <span>{bearingResults.bearingRatio.toFixed(2)}</span>
                        <StatusIcon isSafe={bearingResults.isSafe} />
                    </div>
                </div>

                {/* Anchorage Tension */}
                <div className="flex-row justify-between align-center border-bottom pb-sm">
                    <span>Anchor Tension</span>
                    <div className="flex-row gap-sm align-center">
                        <span>{anchorageResults.tensionRatio.toFixed(2)}</span>
                        <StatusIcon isSafe={anchorageResults.tensionRatio <= 1.0} />
                    </div>
                </div>

                {/* Anchorage Shear */}
                <div className="flex-row justify-between align-center border-bottom pb-sm">
                    <span>Anchor Shear</span>
                    <div className="flex-row gap-sm align-center">
                        <span>{anchorageResults.shearRatio.toFixed(2)}</span>
                        <StatusIcon isSafe={anchorageResults.shearRatio <= 1.0} />
                    </div>
                </div>

                {/* Interaction */}
                <div className="flex-row justify-between align-center pt-sm">
                    <span style={{ fontWeight: 'bold' }}>Interaction</span>
                    <div className="flex-row gap-sm align-center">
                        <span style={{ fontWeight: 'bold' }}>{anchorageResults.interactionRatio.toFixed(2)}</span>
                        <StatusIcon isSafe={anchorageResults.isSafe} />
                    </div>
                </div>
            </div>

            <style>{`
        .justify-between { justify-content: space-between; }
        .border-bottom { border-bottom: 1px solid #eee; }
        .pb-sm { padding-bottom: 8px; }
        .pt-sm { padding-top: 8px; }
      `}</style>
        </div>
    );
};