// src/components/PlanElevationDiagrams.tsx
import React from "react";

type Props = {
    B: number;
    L: number;
    hr: number;
    he: number;
};

export const PlanElevationDiagrams: React.FC<Props> = ({ B, L, hr, he }) => {
    const fmt = (v: number) => v.toFixed(1);

    return (
        <svg width={500} height={260} viewBox="0 0 500 260">
            {/* Common styles */}
            <defs>
                <style>
                    {`
          .dim-line { stroke: #7f8c9a; stroke-width: 1; fill: none; }
          .shape    { stroke: #7f8c9a; stroke-width: 1; fill: none; }
          .label    { fill: #000; font-family: "Segoe UI", Arial, sans-serif; font-size: 10px; }
        `}
                </style>
            </defs>

            {/* ===== PLAN (left) ===== */}
            {/* Building rectangle */}
            <rect x={80} y={90} width={120} height={90} className="shape" />
            {/* Centerline */}
            <line x1={140} y1={90} x2={140} y2={180} className="shape" strokeDasharray="4 3" />

            {/* B dimension (bottom) */}
            {/* dimension line */}
            <line x1={80} y1={195} x2={200} y2={195} className="dim-line" />
            {/* arrowheads */}
            <line x1={80} y1={195} x2={86} y2={191} className="dim-line" />
            <line x1={80} y1={195} x2={86} y2={199} className="dim-line" />
            <line x1={200} y1={195} x2={194} y2={191} className="dim-line" />
            <line x1={200} y1={195} x2={194} y2={199} className="dim-line" />
            {/* text */}
            <text x={140} y={212} textAnchor="middle" className="label">
                {`B = ${fmt(B)} ft`}
            </text>

            {/* L dimension (left) */}
            <line x1={65} y1={90} x2={65} y2={180} className="dim-line" />
            {/* arrowheads */}
            <line x1={65} y1={90} x2={61} y2={96} className="dim-line" />
            <line x1={65} y1={90} x2={69} y2={96} className="dim-line" />
            <line x1={65} y1={180} x2={61} y2={174} className="dim-line" />
            <line x1={65} y1={180} x2={69} y2={174} className="dim-line" />
            {/* text */}
            <text x={40} y={135} textAnchor="middle" className="label">
                {`L = ${fmt(L)} ft`}
            </text>

            {/* PLAN label */}
            <text x={140} y={235} textAnchor="middle" className="label">
                PLAN
            </text>

            {/* ===== ELEVATION (right) ===== */}
            {/* Walls + eave */}
            <line x1={320} y1={180} x2={320} y2={150} className="shape" />
            <line x1={440} y1={180} x2={440} y2={150} className="shape" />
            <line x1={320} y1={150} x2={440} y2={150} className="shape" />
            {/* Roof */}
            <line x1={320} y1={150} x2={380} y2={120} className="shape" />
            <line x1={440} y1={150} x2={380} y2={120} className="shape" />

            {/* B dimension bottom */}
            <line x1={320} y1={195} x2={440} y2={195} className="dim-line" />
            <line x1={320} y1={195} x2={326} y2={191} className="dim-line" />
            <line x1={320} y1={195} x2={326} y2={199} className="dim-line" />
            <line x1={440} y1={195} x2={434} y2={191} className="dim-line" />
            <line x1={440} y1={195} x2={434} y2={199} className="dim-line" />
            <text x={380} y={212} textAnchor="middle" className="label">
                {`B = ${fmt(B)} ft`}
            </text>

            {/* hr dimension left */}
            <line x1={300} y1={120} x2={300} y2={180} className="dim-line" />
            <line x1={300} y1={120} x2={296} y2={126} className="dim-line" />
            <line x1={300} y1={120} x2={304} y2={126} className="dim-line" />
            <line x1={300} y1={180} x2={296} y2={174} className="dim-line" />
            <line x1={300} y1={180} x2={304} y2={174} className="dim-line" />
            <text x={270} y={150} textAnchor="middle" className="label">
                {`hr = ${fmt(hr)} ft`}
            </text>

            {/* he dimension right */}
            <line x1={460} y1={150} x2={460} y2={180} className="dim-line" />
            <line x1={460} y1={150} x2={456} y2={156} className="dim-line" />
            <line x1={460} y1={150} x2={464} y2={156} className="dim-line" />
            <line x1={460} y1={180} x2={456} y2={174} className="dim-line" />
            <line x1={460} y1={180} x2={464} y2={174} className="dim-line" />
            <text x={490} y={165} textAnchor="middle" className="label">
                {`he = ${fmt(he)} ft`}
            </text>

            {/* ELEVATION label */}
            <text x={380} y={235} textAnchor="middle" className="label">
                ELEVATION
            </text>
        </svg>
    );
};
