/**
 * WaterGauge — a stylized "ditch gauge" SVG used as a visual signature
 * for the Water Log feature. Renders a vertical pipe with a water level
 * and a small headgate at the top. Deliberately drawn with a slight
 * hand-sketched quality (rough strokes, no perfectly straight lines)
 * to evoke a field-notebook annotation rather than a slick dashboard
 * chart.
 *
 *   <WaterGauge size={48} level={0.7} status="open" />
 *   <WaterGauge size={24} level={null} status="closed" />
 */

type Props = {
  size?: number;
  level?: number | null; // 0..1
  status?: "open" | "closed" | "maintenance";
  className?: string;
  ariaLabel?: string;
};

export function WaterGauge({
  size = 32,
  level = 0.5,
  status = "open",
  className = "",
  ariaLabel = "Water gauge",
}: Props) {
  const w = size;
  const h = size * 1.25;
  const stroke = Math.max(1, size / 16);
  // Clamp + choose fill level
  const l =
    level == null
      ? status === "closed"
        ? 0
        : 0.45
      : Math.max(0, Math.min(1, level));

  // Color reflects the operational state
  const waterColor =
    status === "maintenance"
      ? "#a16207" // gold-700
      : status === "closed"
        ? "#86868b" // surface-400
        : l > 0.85
          ? "#dc2626" // red — over threshold
          : l < 0.15
            ? "#2563eb" // blue — under threshold
            : "#0e7490"; // cyan-700 — flowing nicely
  const headgateColor = status === "closed" ? "#3b3b3f" : "#1a4d2e";

  return (
    <svg
      width={w}
      height={h}
      viewBox="0 0 32 40"
      role="img"
      aria-label={ariaLabel}
      className={className}
      style={{ display: "inline-block", flexShrink: 0 }}
    >
      {/* Top "headgate" — a small handled gate */}
      <g stroke={headgateColor} strokeWidth={stroke} fill="none" strokeLinecap="round">
        {/* Gate top bar */}
        <path d="M9 4 H23" />
        {/* Gate handle */}
        <path d="M14 1.5 V4 M18 1.5 V4" />
        {/* Gate frame */}
        <path d="M8 4 V8 H24 V4" />
        {/* Gate wheel */}
        <circle cx="16" cy="3" r="1.2" fill={headgateColor} />
      </g>

      {/* The ditch / pipe */}
      <g
        stroke="#1a1a1a"
        strokeWidth={stroke}
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M8 8 L8 36 L24 36 L24 8" />
        {/* Tick marks at quarter / half / three-quarter */}
        <path d="M8 17 H11 M8 24 H11 M8 31 H11" />
        <path d="M24 17 H21 M24 24 H21 M24 31 H21" />
      </g>

      {/* Water level — clipped inside the pipe */}
      <clipPath id={`wg-clip-${Math.round(size)}-${status}`}>
        <path d="M9.2 9 L9.2 35.2 L22.8 35.2 L22.8 9 Z" />
      </clipPath>
      <g clipPath={`url(#wg-clip-${Math.round(size)}-${status})`}>
        <rect
          x={9.2}
          y={35.2 - 25.6 * l}
          width={13.6}
          height={25.6 * l}
          fill={waterColor}
          opacity={0.85}
        />
        {/* Wavy water surface — three short arcs */}
        {l > 0 && (
          <path
            d={`M9.2 ${35.2 - 25.6 * l} q1.7 -1 3.4 0 t3.4 0 t3.4 0 t3.4 0`}
            stroke={waterColor}
            strokeWidth={stroke}
            fill="none"
            strokeLinecap="round"
          />
        )}
      </g>

      {/* Status dot — top-right corner */}
      <circle
        cx={26}
        cy={3}
        r={1.4}
        fill={
          status === "open"
            ? "#16a34a" // green
            : status === "closed"
              ? "#9ca3af" // gray
              : "#ca8a04" // gold
        }
      />
    </svg>
  );
}
