// Drinks bar-chart components — discrete daily units.
// DrinksBars: 14-day mini for the Today card.
// DrinksTrendChart: full panel for the Trends tab.

function DrinksBars({
  data,                       // array of daily unit values, oldest → newest
  width = 320, height = 38, fullWidth = false,
  threshold = 3, mutedColor, dangerColor,
}) {
  const theme = window.HC_THEME.useHCTheme();
  const p = theme.palette;
  const arr = (data || []).map((v) => Number(v) || 0);
  const days = arr.length;
  if (days === 0) return null;

  const max = Math.max(threshold + 1, ...arr) * 1.05;
  const muted = mutedColor || p.text3;
  const danger = dangerColor || p.warning;
  const padX = 2, padY = 4;
  const innerW = width - 2 * padX;
  const innerH = height - 2 * padY;
  const slot = innerW / days;
  const barW = Math.max(2.5, slot * 0.55);

  return (
    <svg width={fullWidth ? '100%' : width} height={height}
         viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none"
         style={{ display: 'block' }}>
      {/* baseline */}
      <line x1={padX} x2={width - padX} y1={height - padY} y2={height - padY}
            stroke={p.border} strokeWidth="0.8" />
      {arr.map((v, i) => {
        if (v <= 0) return null;
        const h = (v / max) * innerH;
        const x = padX + slot * i + (slot - barW) / 2;
        const y = height - padY - h;
        const color = v >= threshold ? danger : muted;
        return <rect key={i} x={x} y={y} width={barW} height={h} rx="0.8" fill={color} />;
      })}
    </svg>
  );
}

// Trends panel — uses the drinks series from SeriesContext (via buildSeries).
// Phase overlays + spasm/event markers + dashed 3u threshold, matching the
// hand-rolled SVG styling of TrendChart.
function DrinksTrendChart({
  width = 358, height = 100,
  range = 'full', windowDays = 60,
  phases = [], annotations = [],
  threshold = 3,
}) {
  const theme = window.HC_THEME.useHCTheme();
  const p = theme.palette;
  const SERIES = React.useContext(window.SeriesContext);
  const s = SERIES && SERIES.drinks;
  if (!s) return null;

  const total = s.raw.length;
  const days = range === '4w' ? Math.min(28, total) : Math.min(windowDays, total);
  const offset = total - days;

  const data = s.raw.slice(-days);
  const max = Math.max(threshold + 1, ...data) * 1.05;
  const muted = p.text3;
  const danger = p.warning;

  const padL = 32, padR = 12, padT = 10, padB = 22;
  const innerW = width - padL - padR;
  const innerH = height - padT - padB;
  const slot = innerW / days;
  const barW = Math.max(2, slot * 0.55);
  const yBase = padT + innerH;
  const y = (v) => padT + ((max - v) / max) * innerH;

  const ticks = [0, threshold, Math.ceil(max)];

  // X-tick date labels match the other TrendChart panels by reading from
  // the shared HC_TREND_DATES array populated by TrendsTab.
  const dates = window.HC_TREND_DATES || [];

  return (
    <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`}
         preserveAspectRatio="none" style={{ display: 'block' }}>
      {phases.map((ph, i) => {
        const [a, b] = ph.range;
        const a2 = Math.max(0, a - offset);
        const b2 = Math.max(0, b - offset);
        if (b2 <= 0 || a2 >= days) return null;
        return (
          <rect key={i}
                x={padL + slot * a2} y={padT}
                width={slot * (Math.min(b2, days) - a2)} height={innerH}
                fill={ph.color} />
        );
      })}

      {ticks.map((t, i) => (
        <line key={`g${i}`} x1={padL} x2={width - padR} y1={y(t)} y2={y(t)}
              stroke={p.grid} strokeWidth="1" />
      ))}
      {ticks.map((t, i) => (
        <text key={`l${i}`} x={padL - 6} y={y(t) + 3} fontSize="9" fill={p.text3}
              fontFamily="DM Mono, monospace" textAnchor="end">{t}</text>
      ))}

      {/* dashed 3u threshold */}
      <line x1={padL} x2={width - padR} y1={y(threshold)} y2={y(threshold)}
            stroke={danger} strokeWidth="1" strokeDasharray="3 3" opacity="0.55" />
      <text x={width - padR - 4} y={y(threshold) - 3} fontSize="9" fill={danger}
            fontFamily="DM Mono, monospace" textAnchor="end" opacity="0.85">3u</text>

      {data.map((v, i) => {
        if (v <= 0) return null;
        const h = (v / max) * innerH;
        const x = padL + slot * i + (slot - barW) / 2;
        const color = v >= threshold ? danger : muted;
        return <rect key={i} x={x} y={yBase - h} width={barW} height={h} rx="1" fill={color} />;
      })}

      {annotations.map((a, i) => {
        const idx = a.idx - offset;
        if (idx < 0 || idx >= days) return null;
        const xc = padL + slot * idx + slot / 2;
        return (
          <g key={`a${i}`}>
            <line x1={xc} x2={xc} y1={padT} y2={padT + innerH}
                  stroke={p.warning} strokeWidth="0.8" strokeDasharray="2 2" opacity="0.55" />
            <text x={xc + 3} y={padT + 8} fontSize="9" fill={p.warning}
                  fontFamily="DM Mono, monospace" opacity="0.85">{a.label}</text>
          </g>
        );
      })}

      {[0, Math.floor(days / 2), days - 1].map((i) => {
        const iso = dates[offset + i];
        let label = '';
        if (iso) {
          const dt = new Date(iso + 'T00:00:00');
          label = `${['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][dt.getMonth()]} ${dt.getDate()}`;
        }
        return (
          <text key={`x${i}`} x={padL + slot * i + slot / 2} y={height - 6}
                fontSize="9" fill={p.text3} fontFamily="DM Mono, monospace"
                textAnchor={i === 0 ? 'start' : i === days - 1 ? 'end' : 'middle'}>{label}</text>
        );
      })}
    </svg>
  );
}

window.DrinksBars = DrinksBars;
window.DrinksTrendChart = DrinksTrendChart;