import React from 'react';

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

export const EscarpmentDiagram: React.FC<EscarpmentProps> = ({ H, Lh, x, condition }) => {
    return (
        <svg viewBox="0 0 400 240" style={{ width: '100%', height: 'auto', maxHeight: '220px', background: '#e0f7fa' }}>
            <defs>
                <marker id="arrow" 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="hatch" 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>

            {/* Ground / Hill Profile */}
            <path d="M20,180 L100,180 L180,100 L380,100" fill="none" stroke="#000" strokeWidth="2" />

            {/* Ground Hatching (simplified) */}
            <path d="M20,180 L100,180 L180,100 L380,100 L380,190 L180,190 L100,190 L20,190 Z" fill="url(#hatch)" opacity="0.3" />

            {/* Dashed line for H/2 */}
            <line x1="100" y1="180" x2="380" y2="180" stroke="#555" strokeWidth="1" strokeDasharray="4" />
            <line x1="140" y1="140" x2="380" y2="140" stroke="#555" strokeWidth="1" strokeDasharray="4" />

            {/* Vertical Reference for Velocity Profile z-axis */}
            <line x1="50" y1="180" x2="50" y2="80" stroke="#000" strokeWidth="1.5" markerEnd="url(#arrow)" />
            <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>

            {/* Velocity Profile Curve (schematic) */}
            <path d="M50,180 Q80,160 80,100" fill="none" stroke="#000" strokeWidth="1" />

            {/* Speed-up Profile at Crest */}
            <line x1="180" y1="100" x2="180" y2="20" stroke="#000" strokeWidth="1.5" />
            <path d="M180,100 Q210,80 210,30" fill="none" stroke="#000" strokeWidth="1" />
            {/* Hatching for speed-up */}
            <path d="M180,100 Q210,80 210,30 L180,30 Z" fill="url(#hatch)" opacity="0.5" />
            <text x="215" y="60" fontSize="12">Speed-up</text>
            <text x="160" y="40" fontSize="12">V(z)</text>

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

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

            {/* H/2 */}
            <text x="320" y="125" fontSize="10">H/2</text>
            <text x="320" y="165" fontSize="10">H/2</text>

            {/* x upwind / downwind */}
            {/* We show x depending on condition or just schematic arrows with dynamic values if relevant */}
            <line x1="180" y1="100" x2="120" y2="100" stroke="#000" strokeWidth="1" markerEnd="url(#arrow)" />
            <text x="110" y="90" fontSize="10">{condition === 'Upwind' ? `x = ${x}` : 'x(upwind)'}</text>

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

            {/* Title - MOVED LOWER */}
            <text x="200" y="235" fontSize="14" fontWeight="bold" textAnchor="middle" textDecoration="underline">ESCARPMENT</text>
        </svg>
    );
};