import React from "react";

type ZoneLabels = {
    zone3?: string;
    zone3E?: string;
    zone2?: string;
    zone2E?: string;
    zone5?: string;
    zone5E?: string;
    zone6?: string;
    zone6E?: string;
};

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

/**
 * Fixed-geometry SVG diagram for Load Case 2 (Longitudinal).
 * Wind from Right (End Wall).
 */
export const WindLoadCase2Diagram: React.FC<Props> = ({
    labels,
    windwardText = "WINDWARD",
    leewardText = "LEEWARD",
}) => {
    const L = {
        zone2: labels?.zone2 ?? "2",
        zone2E: labels?.zone2E ?? "2E",
        zone3: labels?.zone3 ?? "3",
        zone3E: labels?.zone3E ?? "3E",
        zone5: labels?.zone5 ?? "5", // Side Wall
        zone6: labels?.zone6 ?? "6", // Windward Wall (End)
        zone6E: labels?.zone6E ?? "6E",
    };

    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) ----------------- */}

            {/* 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) - Now Side Roof */}
            <polygon
                className="zone-fill-roof edge"
                points="130,78 245,78 265,88 150,88"
            />

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

            {/* Front wall (Left Face) - Now Side Wall (Zone 5) */}
            <polygon
                className="zone-fill-wall edge"
                points="90,110 140,130 140,190 90,170"
            />

            {/* Side wall (Right Face) - Now Windward Wall (Zone 6) */}
            <polygon
                className="zone-fill-wall edge"
                points="140,130 300,140 300,190 140,190"
            />

            {/* ----------------- WINDWARD ARROW (From Right) ----------------- */}

            {/* Arrow body pointing Left */}
            <polygon
                points="340,150 300,162 340,174 325,162"
                fill="#000000"
            />
            {/* Windward text */}
            <text
                x={330}
                y={185}
                className="caption"
                textAnchor="middle"
            >
                {windwardText}
            </text>

            {/* ----------------- LEEWARD TEXT (Left Side) ----------------- */}
            <text
                x={60}
                y={140}
                className="caption"
                textAnchor="middle"
            >
                {leewardText}
            </text>

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

            {/* Roof Back (Zone 3) */}
            <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>

            {/* Roof Back Edge (Zone 3E) */}
            <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>

            {/* Roof Front (Zone 2) */}
            <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>

            {/* Roof Front Edge (Zone 2E) */}
            <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>

            {/* Left Wall (Zone 5 - Side Wall) */}
            <circle cx={115} cy={150} r={12} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={115} y={154} textAnchor="middle" className="zone-label">
                {L.zone5}
            </text>

            {/* Right Wall (Zone 6 - Windward Wall) */}
            <circle cx={220} cy={165} r={12} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={220} y={169} textAnchor="middle" className="zone-label">
                {L.zone6}
            </text>
            {/* Right Wall Edge (Zone 6E) */}
            <circle cx={280} cy={155} r={10} fill="#ffffff" stroke="#000000" strokeWidth={0.8} />
            <text x={280} y={159} textAnchor="middle" className="zone-label">
                {L.zone6E}
            </text>

        </svg>
    );
};
