import { useWindStore } from '../../store/windStore';

export const RoofZonesDiagram = () => {
    const { inputs } = useWindStore();
    const { width: B, length: L } = inputs.dimensions;

    // SVG scaling
    const padding = 40;
    const svgWidth = 300;
    const svgHeight = 250;

    // Normalize dimensions
    const maxDim = Math.max(B, L);
    const scale = (Math.min(svgWidth, svgHeight) - 2 * padding) / maxDim;

    const sB = B * scale;
    const sL = L * scale;

    const startX = (svgWidth - sB) / 2;
    const startY = (svgHeight - sL) / 2;

    // a distance (end zone width)
    // a = Max(Min(0.1*B, 0.4*h), 0.04*B, 3.00) usually.
    // For now, let's estimate 'a' visually as 10% of B or L.
    // We should implement specific 'a' calculation in logic, but for diagram we can approximate or use calculation if available.
    // Let's approximate a = 0.1 * min(B, L)
    const a_real = Math.max(Math.min(0.1 * B, 0.4 * 15), 0.04 * B, 3); // using h=15 approx
    const a = a_real * scale;

    return (
        <div className="card">
            <div className="card-header">Roof Zones (ASCE 7 Figure 28.3-1)</div>
            <div className="flex-row gap-lg justify-center">
                <svg width={svgWidth} height={svgHeight} style={{ border: '1px dashed #ccc' }}>
                    {/* Main Roof Rect */}
                    <rect x={startX} y={startY} width={sB} height={sL} fill="none" stroke="#333" strokeWidth="2" />

                    {/* Ridge Line (assuming L is ridge direction? No, usually B is width, L is length. Diagram shows ridge parallel to L or B?)
                       Screenshot Loading... Figure 28.3-1 shows L parallel to ridge.
                       So ridge is horizontal in the middle of B?
                       If L is parallel to ridge, then ridge runs along L.
                       So ridge line is from (0, L/2) to (B, L/2) ? No, from (width/2, 0) to (width/2, L).
                       Wait, diagram "L = dimension parallel to ridge". So ridge length = L.
                       So ridge runs along length L.
                       If Plan view has B vertical and L horizontal?
                       Let's assume standard orientation: B is width (vertical in plan), L is length (horizontal).
                       Ridge runs horizontal.
                    */}

                    {/* Let's draw based on sB (width) and sL (length). Assume ridge bisects sB. */}
                    <line x1={startX} y1={startY + sL / 2} x2={startX + sB} y2={startY + sL / 2} stroke="#999" strokeDasharray="5 5" />

                    {/* Zone Lines */}
                    {/* Zone 2E is corners, Zone 3 is corners? No. 
                        Zone 3 is corners. Zone 2 is edges. Zone 1 is interior.
                        Actually Figure 28.3-1:
                        Corners are 3.
                        Edges parallel to ridge are 2.
                        Edges perpendicular to ridge are 2?
                        Let's roughly draw 'a' strips.
                    */}

                    {/* Corner zones (3) */}
                    <rect x={startX} y={startY} width={a} height={a} fill="#ffebee" stroke="none" />
                    <rect x={startX + sB - a} y={startY} width={a} height={a} fill="#ffebee" stroke="none" />
                    <rect x={startX} y={startY + sL - a} width={a} height={a} fill="#ffebee" stroke="none" />
                    <rect x={startX + sB - a} y={startY + sL - a} width={a} height={a} fill="#ffebee" stroke="none" />

                    {/* Label Corners '3' */}
                    <text x={startX + a / 2} y={startY + a / 2} fontSize="10" textAnchor="middle" dy="3">3</text>
                    <text x={startX + sB - a / 2} y={startY + a / 2} fontSize="10" textAnchor="middle" dy="3">3</text>
                    <text x={startX + a / 2} y={startY + sL - a / 2} fontSize="10" textAnchor="middle" dy="3">3</text>
                    <text x={startX + sB - a / 2} y={startY + sL - a / 2} fontSize="10" textAnchor="middle" dy="3">3</text>

                    {/* Edge Strips (2) - Excluding corners */}

                    {/* Interior (1) */}
                    <text x={startX + sB / 2} y={startY + sL / 4} fontSize="12" textAnchor="middle" dy="4">1</text>
                    <text x={startX + sB / 2} y={startY + 3 * sL / 4} fontSize="12" textAnchor="middle" dy="4">1</text>

                    {/* Dimension a */}
                    <line x1={startX} y1={startY - 10} x2={startX + a} y2={startY - 10} stroke="#333" />
                    <text x={startX + a / 2} y={startY - 15} fontSize="10" textAnchor="middle">a</text>

                </svg>
            </div>
            <div style={{ fontSize: '11px', color: '#666', marginTop: '8px', textAlign: 'center' }}>
                Approx. End Zone Width a = {a_real.toFixed(1)} ft
            </div>
        </div>
    );
};