import React from 'react';

const arrowMarker = (
    <defs>
        <marker id="arrow-start" markerWidth="6" markerHeight="6" refX="0" refY="3" orient="auto">
            <polygon points="6 0, 0 3, 6 6" fill="#000" />
        </marker>
        <marker id="arrow-end" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#000" />
        </marker>
        <marker id="arrow-head" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
            <polygon points="0 0, 8 4, 0 8" fill="#000" />
        </marker>
    </defs>
);

const textStyle = { fontSize: '12px', fontFamily: 'Arial, sans-serif', fill: '#000' };
const dimStyle = { stroke: '#000', strokeWidth: 1 };


export const ElevatedPlanDiagram: React.FC = () => {
    return (
        <svg width="280" height="250" viewBox="0 0 280 250" style={{ background: '#e0f7fa' }}>
            {arrowMarker}

            {/* Title / Note */}
            <text x="140" y="20" textAnchor="middle" fill="blue" fontSize="12">
                hb = 0, therefore... (conditional text moved to parent)
            </text>

            {/* Building Center Mass (Grey) */}
            <rect x="100" y="80" width="80" height="90" fill="#555" stroke="none" />

            {/* Outer Perimeter (Columns Line) */}
            <rect x="40" y="40" width="200" height="170" fill="none" stroke="#555" strokeWidth="0.5" />

            {/* Columns (Small Squares) */}
            {/* Corners */}
            <rect x="36" y="36" width="8" height="8" fill="#333" />
            <rect x="236" y="36" width="8" height="8" fill="#333" />
            <rect x="36" y="206" width="8" height="8" fill="#333" />
            <rect x="236" y="206" width="8" height="8" fill="#333" />
            {/* Midpoints */}
            <rect x="136" y="36" width="8" height="8" fill="#333" />
            <rect x="136" y="206" width="8" height="8" fill="#333" />
            <rect x="36" y="121" width="8" height="8" fill="#333" />
            <rect x="236" y="121" width="8" height="8" fill="#333" />

            {/* Dimension L1 (Width of core) */}
            <line x1="100" y1="65" x2="180" y2="65" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            <line x1="100" y1="80" x2="100" y2="60" stroke="#000" strokeWidth="0.5" />
            <line x1="180" y1="80" x2="180" y2="60" stroke="#000" strokeWidth="0.5" />
            <text x="140" y="60" textAnchor="middle" style={textStyle}>L1</text>

            {/* Dimension L2 (Height of core) */}
            <line x1="195" y1="80" x2="195" y2="170" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            <line x1="180" y1="80" x2="200" y2="80" stroke="#000" strokeWidth="0.5" />
            <line x1="180" y1="170" x2="200" y2="170" stroke="#000" strokeWidth="0.5" />
            <text x="205" y="125" style={textStyle} transform="rotate(-90, 205, 125)">L2</text>

            {/* Direction Arrows */}
            {/* Direction 1 (Right to Left) */}
            <line x1="260" y1="125" x2="220" y2="125" stroke="#000" strokeWidth="1.5" markerEnd="url(#arrow-head)" />
            {/* Wait, screenshot usually has large open arrow. Simple line arrow is fine. */}
            <text x="240" y="145" textAnchor="middle" style={textStyle} fontSize="10">DIRECTION 1</text>

            {/* Direction 2 (Bottom to Top) */}
            <line x1="140" y1="240" x2="140" y2="215" stroke="#000" strokeWidth="1.5" markerEnd="url(#arrow-head)" />
            <text x="170" y="235" style={textStyle} fontSize="10">DIRECTION 2</text>

            <text x="40" y="240" style={{ ...textStyle, textDecoration: 'underline' }}>PLAN</text>
        </svg>
    );
};

export const ElevatedElevationDiagram: React.FC = () => {
    return (
        <svg width="200" height="250" viewBox="0 0 200 250" style={{ background: '#e0f7fa' }}>
            {arrowMarker}

            {/* Ground Line */}
            <line x1="20" y1="230" x2="180" y2="230" stroke="#000" strokeWidth="2" />
            <text x="100" y="245" textAnchor="middle" style={{ ...textStyle, textDecoration: 'underline' }}>ELEVATION</text>

            {/* Columns */}
            <rect x="50" y="180" width="6" height="50" fill="#333" />
            <rect x="97" y="180" width="6" height="50" fill="#333" />
            <rect x="144" y="180" width="6" height="50" fill="#333" />

            {/* Building Block */}
            <rect x="40" y="30" width="120" height="150" fill="none" stroke="#000" strokeWidth="1.5" />

            {/* Dimensions */}
            {/* h (Total Height) */}
            <line x1="25" y1="230" x2="25" y2="30" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            <line x1="20" y1="30" x2="40" y2="30" stroke="#000" strokeWidth="0.5" />
            <text x="15" y="130" textAnchor="end" style={textStyle}>h</text>

            {/* h2 (Building Height) */}
            <line x1="45" y1="180" x2="45" y2="30" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            {/* <text x="50" y="105" textAnchor="start" style={textStyle} transform="rotate(-90, 50, 105)">h2</text> */}
            {/* Move h2 inside or to side? Screenshot shows it adjacent. */}
            <text x="40" y="100" textAnchor="end" style={textStyle} transform="rotate(-90, 40, 100)">h2</text>

            {/* hb (Bottom Height) */}
            <line x1="170" y1="230" x2="170" y2="180" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            <line x1="160" y1="180" x2="180" y2="180" stroke="#000" strokeWidth="0.5" />
            <text x="165" y="205" textAnchor="end" style={textStyle} transform="rotate(-90, 165, 205)">hb</text>

            {/* Z (Reference Height? 0.25h2 + hb) */}
            {/* Screenshot shows Z line from Ground up to some point in building */}
            <line x1="190" y1="230" x2="190" y2="142" style={dimStyle} markerStart="url(#arrow-start)" markerEnd="url(#arrow-end)" />
            <line x1="160" y1="142" x2="195" y2="142" stroke="#000" strokeWidth="0.5" />
            <text x="185" y="190" textAnchor="end" style={textStyle} transform="rotate(-90, 185, 190)">Z</text>

            {/* 0.25 h2 label */}
            <text x="175" y="160" textAnchor="middle" style={{ fontSize: '10px', fill: '#000' }} transform="rotate(-90, 175, 160)">0.25 h2</text>

        </svg>
    );
};