import type React from 'react'

interface StackedBarsProps {
  days: { tools: Record<string, number> }[]
  toolColor: (tool: string) => string
  w?: number
  h?: number
}

export function StackedBars({ days, toolColor, w = 600, h = 130 }: StackedBarsProps): React.JSX.Element {
  const n = days.length
  if (n === 0) {
    return (
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', width: '100%' }} />
    )
  }

  // Find the maximum total across all days for scaling.
  const totals = days.map(d => Object.values(d.tools).reduce((a, b) => a + b, 0))
  const maxTotal = Math.max(...totals, 1)

  const barW = Math.max(1, (w / n) - 2)

  return (
    <svg
      viewBox={`0 0 ${w} ${h}`}
      style={{ display: 'block', width: '100%', height: h }}
      preserveAspectRatio="none"
    >
      {/* Y axis grid lines */}
      {[0, 0.25, 0.5, 0.75, 1].map(frac => {
        const y = h - frac * h
        return (
          <line
            key={frac}
            x1={0}
            x2={w}
            y1={y}
            y2={y}
            stroke="var(--rule-2)"
            strokeWidth={0.5}
          />
        )
      })}
      {days.map((day, i) => {
        const x = i * (w / n) + 1
        const tools = Object.entries(day.tools).sort((a, b) => a[0].localeCompare(b[0]))
        let yBottom = h
        return (
          <g key={i}>
            {tools.map(([tool, count]) => {
              if (count <= 0) return null
              const barH = (count / maxTotal) * h
              yBottom -= barH
              return (
                <rect
                  key={tool}
                  x={x}
                  y={yBottom}
                  width={barW}
                  height={barH}
                  fill={toolColor(tool)}
                  opacity={0.85}
                />
              )
            })}
          </g>
        )
      })}
    </svg>
  )
}