import React from 'react';

interface RidgeProps {
    H: number;
    Lh: number;
    x: number;
    condition: 'Upwind' | 'Downwind';
}

export const RidgeDiagram: React.FC<RidgeProps> = ({ H, Lh, x, condition }) => {
    return (
        <svg viewBox="0 0 400 240" style={{ width: '100%', height: 'auto', maxHeight: '220px', background: '#e0f7fa' }}>
            <defs>
                <marker id="arrowRidge" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
                    <path d="M0,0 L0,6 L9,3 z" fill="#000" />
                </marker>
                <pattern id="hatchRidge" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
                    <line x1="0" y1="0" x2="0" y2="4" style={{ stroke: '#888', strokeWidth: 1 }} />
                </pattern>
            </defs>

            {/* 2D Ridge Profile */}
            <path d="M20,180 L120,180 Q160,180 180,140 T200,100 T220,140 T280,180 L380,180" fill="none" stroke="#000" strokeWidth="2" />

            {/* Ground Hatching */}
            <path d="M20,180 L120,180 Q160,180 180,140 T200,100 T220,140 T280,180 L380,180 L380,190 L20,190 Z" fill="url(#hatchRidge)" opacity="0.3" />

            {/* Vertical Height Line at Crest */}
            <line x1="200" y1="180" x2="200" y2="20" stroke="#000" strokeWidth="1" />

            {/* H/2 Dashed Lines */}
            <line x1="120" y1="180" x2="280" y2="180" stroke="#555" strokeWidth="1" strokeDasharray="4" />
            <line x1="160" y1="140" x2="330" y2="140" stroke="#555" strokeWidth="1" strokeDasharray="4" />

            {/* H Dimension */}
            <line x1="320" y1="100" x2="320" y2="180" stroke="#000" strokeWidth="1" markerEnd="url(#arrowRidge)" markerStart="url(#arrowRidge)" />
            <text x="325" y="145" fontSize="12" fontWeight="bold">H = {H}</text>

            <text x="290" y="125" fontSize="10">H/2</text>
            <text x="290" y="165" fontSize="10">H/2</text>

            {/* Lh Dimension */}
            <line x1="130" y1="195" x2="200" y2="195" stroke="#000" strokeWidth="1" markerEnd="url(#arrowRidge)" markerStart="url(#arrowRidge)" />
            <text x="150" y="210" fontSize="12" fontWeight="bold">Lh = {Lh}</text>
            <line x1="130" y1="180" x2="130" y2="200" stroke="#555" strokeWidth="0.5" />
            <line x1="200" y1="80" x2="200" y2="200" stroke="#555" strokeWidth="0.5" />


            {/* Z axis and V(z) at far left */}
            <line x1="50" y1="180" x2="50" y2="80" stroke="#000" strokeWidth="1.5" markerEnd="url(#arrowRidge)" />
            <text x="40" y="75" fontSize="12" fontWeight="bold">z</text>
            <line x1="50" y1="100" x2="80" y2="100" stroke="#000" strokeWidth="1" />
            <text x="60" y="95" fontSize="12">V(z)</text>
            <path d="M50,180 Q80,160 80,100" fill="none" stroke="#000" strokeWidth="1" />

            {/* Speed-up Profile at Crest */}
            <path d="M200,100 Q230,80 230,30" fill="none" stroke="#000" strokeWidth="1" />
            <path d="M200,100 Q230,80 230,30 L200,30 Z" fill="url(#hatchRidge)" opacity="0.5" />
            <text x="235" y="60" fontSize="12">Speed-up</text>
            <text x="180" y="40" fontSize="12" >V(z)</text>

            {/* x upwind / downwind */}
            <line x1="200" y1="100" x2="140" y2="100" stroke="#000" strokeWidth="1" markerEnd="url(#arrowRidge)" />
            <text x="130" y="90" fontSize="10">{condition === 'Upwind' ? `x = ${x}` : 'x(upwind)'}</text>

            <line x1="200" y1="100" x2="280" y2="100" stroke="#000" strokeWidth="1" markerEnd="url(#arrowRidge)" />
            <text x="280" y="90" fontSize="10">{condition === 'Downwind' ? `x = ${x}` : 'x(downwind)'}</text>

            <text x="200" y="235" fontSize="14" fontWeight="bold" textAnchor="middle" textDecoration="underline">2D RIDGE or 3D AXISYMMETRICAL HILL</text>
        </svg>
    );
};