import React from "react";

type ZoneLabels = {
    zone3?: string;
    zone3E?: string;
    zone2?: string;
    zone2E?: string;
    zone5?: string;
    zone5E?: string;
    zone1T?: string;
    zone4E?: string;
};

type Props = {
    labels?: ZoneLabels;
    windwardText?: string;
    leewardText?: string;
};

/**
 * Fixed-geometry SVG diagram for Load Case 3 (Torsional Case 1).
 * Same geometry as Case 1, but with T-zones.
 */
export const WindLoadCase3Diagram: React.FC<Props> = ({
    labels,
    windwardText = "WINDWARD",
    leewardText = "LEEWARD",
}) => {
    const L = {
        zone3: labels?.zone3 ?? "3T",
        zone3E: labels?.zone3E ?? "3E",
        zone2: labels?.zone2 ?? "2T",
        zone2E: labels?.zone2E ?? "2E",
        zone1T: labels?.zone1T ?? "1T",
        zone4E: labels?.zone4E ?? "4E",
    };

    return (
        <svg
            viewBox="0 0 400 250"
            width={400}
            height={250}
            xmlns="http://www.w3.org/2000/svg"
        >
            <defs>
                <style>
                    {`
          .edge { stroke:#000000; stroke-width:1.2; fill:none; }
          .zone-fill-roof { fill:#e1e6f0; }
          .zone-fill-wall { fill:#f0f3f8; }
          .zone-label {
            font-family: "Times New Roman", serif;
            font-size: 11px;
          }
          .caption {
            font-family: "Times New Roman", serif;
            font-size: 10px;
          }
        `}
                </style>
            </defs>

            {/* ----------------- BUILDING GEOMETRY (FIXED) ----------------- */}
            {/* Same as Case 1 */}

            {/* Far roof edge (back ridge line) */}
            <polyline className="edge" points="110,70 260,70 320,100" />

            {/* Near roof eave */}
            <polyline className="edge" points="90,110 240,110 300,140" />

            {/* Left vertical edges */}
            <polyline className="edge" points="90,110 90,170 140,190" />

            {/* Right wall front vertical */}
            <polyline className="edge" points="300,140 300,190" />

            {/* Bottom front edge */}
            <polyline className="edge" points="140,190 300,190" />

            {/* Ridge dashed line */}
            <line x1={145} y1={90} x2={275} y2={90} stroke="#000000" strokeWidth={1} strokeDasharray="4 3" />

            {/* ----------------- ZONE FILLS ----------------- */}

            {/* Roof zone 3 (back middle) */}
            <polygon className="zone-fill-roof edge" points="130,78 245,78 265,88 150,88" />

            {/* Roof zone 2 (front middle) */}
            <polygon className="zone-fill-roof edge" points="100,106 215,106 235,116 120,116" />

            {/* Front wall (zone 1T) */}
            <polygon className="zone-fill-wall edge" points="90,110 140,130 140,190 90,170" />

            {/* Side wall (zone 4E) */}
            <polygon className="zone-fill-wall edge" points="140,130 300,140 300,190 140,190" />

            {/* ----------------- WINDWARD ARROW ----------------- */}
            {/* Same as Case 1 */}
            <polygon points="135,150 175,162 135,174 150,162" fill="#000000" />
            <text x={160} y={185} className="caption" textAnchor="middle">{windwardText}</text>

            {/* ----------------- LEEWARD TEXT ----------------- */}
            <text x={245} y={60} className="caption" textAnchor="middle">{leewardText}</text>

            {/* ----------------- ZONE LABEL CIRCLES ----------------- */}

            {/* Zone 3T (roof middle) */}
            <circle cx={190} cy={82} r={12} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={190} y={86} textAnchor="middle" className="zone-label">{L.zone3}</text>

            {/* Zone 3E (ridge edge) */}
            <circle cx={275} cy={94} r={10} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={275} y={98} textAnchor="middle" className="zone-label">{L.zone3E}</text>

            {/* Zone 2T (front roof) */}
            <circle cx={185} cy={115} r={12} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={185} y={119} textAnchor="middle" className="zone-label">{L.zone2}</text>

            {/* Zone 2E (roof eave edge) */}
            <circle cx={265} cy={130} r={10} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={265} y={134} textAnchor="middle" className="zone-label">{L.zone2E}</text>

            {/* Zone 1T (wall middle) */}
            <circle cx={225} cy={160} r={12} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={225} y={164} textAnchor="middle" className="zone-label">{L.zone1T}</text>

            {/* Zone 4E (right wall edge) */}
            <circle cx={302} cy={155} r={10} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={302} y={159} textAnchor="middle" className="zone-label">{L.zone4E}</text>
        </svg>
    );
};
