import { useState, useRef } from 'react'

// Proper sleep hypnogram: 4 horizontal lanes (Awake/REM/Light/Deep), time on X axis.
const SLEEP_LANE_ORDER = [1, 4, 2, 3]  // top→bottom: awake, rem, light, deep
const SLEEP_STAGE_COLOR = { 0: '#6b7280', 1: '#eab308', 2: '#a78bfa', 3: '#6366f1', 4: '#7c3aed' }
const SLEEP_STAGE_LABEL = { 1: 'Awake', 2: 'Light', 3: 'Deep', 4: 'REM' }
const LANE_H = 15

const fmtClock = (ms) => new Date(ms).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })

export default function SleepHypnogram({ sleepStart, sleepEnd, stages }) {
  const wrapRef = useRef(null)
  const [tip, setTip] = useState(null)
  if (!sleepStart || !sleepEnd || !stages?.length) return null
  const startMs = new Date(sleepStart).getTime()
  const endMs   = new Date(sleepEnd).getTime()
  const windowMs = endMs - startMs
  if (windowMs <= 0) return null

  // Build segments per lane (keep each segment's real start/end for the tooltip)
  const segsByLane = {}
  SLEEP_LANE_ORDER.forEach(lv => { segsByLane[lv] = [] })
  stages.forEach(([tsMs, level], i) => {
    if (!(level in segsByLane)) return
    const nextTs = i + 1 < stages.length ? stages[i + 1][0] : endMs
    const left  = Math.max(0, (tsMs - startMs) / windowMs * 100)
    const right = Math.min(100, (nextTs - startMs) / windowMs * 100)
    const w = right - left
    if (w > 0) segsByLane[level].push({ left, w, level, startMs: tsMs, endMs: nextTs })
  })

  const showTip = (seg, e) => {
    const rect = wrapRef.current?.getBoundingClientRect()
    if (!rect) return
    setTip({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      level: seg.level,
      range: `${fmtClock(seg.startMs)}–${fmtClock(seg.endMs)}`,
      mins: Math.max(1, Math.round((seg.endMs - seg.startMs) / 60000)),
    })
  }

  // Hour ticks
  const sh = new Date(startMs); sh.setMinutes(0, 0, 0); sh.setHours(sh.getHours() + 1)
  const ticks = []
  for (let t = sh.getTime(); t < endMs; t += 3600000) {
    const pct = (t - startMs) / windowMs * 100
    if (pct >= 0 && pct <= 100)
      ticks.push({ pct, label: new Date(t).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }) })
  }

  return (
    <div className="pl-10">
      <div ref={wrapRef} className="relative" onMouseLeave={() => setTip(null)}>
        <div className="space-y-px">
          {SLEEP_LANE_ORDER.map(level => (
            <div key={level} className="relative flex items-center">
              <span className="absolute right-full pr-1.5 text-gray-500 whitespace-nowrap select-none"
                style={{ fontSize: 10 }}>
                {SLEEP_STAGE_LABEL[level]}
              </span>
              <div className="relative flex-1 rounded-sm overflow-hidden bg-gray-800/50" style={{ height: LANE_H }}>
                {segsByLane[level].map((seg, i) => (
                  <div key={i} className="absolute top-0 h-full cursor-pointer"
                    style={{ left: `${seg.left}%`, width: `${seg.w}%`, backgroundColor: SLEEP_STAGE_COLOR[level] }}
                    onMouseEnter={(e) => showTip(seg, e)}
                    onMouseMove={(e) => showTip(seg, e)} />
                ))}
                {ticks.map((t, i) => (
                  <div key={i} className="absolute top-0 bottom-0 w-px bg-black/20 pointer-events-none"
                    style={{ left: `${t.pct}%` }} />
                ))}
              </div>
            </div>
          ))}
        </div>
        {tip && (
          <div className="absolute z-20 pointer-events-none px-2 py-1 rounded-md bg-gray-900/95 border border-gray-700 shadow-lg whitespace-nowrap flex items-center gap-1.5"
            style={{ left: tip.x, top: tip.y - 10, transform: 'translate(-50%, -100%)', fontSize: 11 }}>
            <span className="inline-block w-2 h-2 rounded-sm" style={{ backgroundColor: SLEEP_STAGE_COLOR[tip.level] }} />
            <span className="text-white font-medium">{SLEEP_STAGE_LABEL[tip.level]}</span>
            <span className="text-gray-400">{tip.range}</span>
            <span className="text-gray-500">· {tip.mins}m</span>
          </div>
        )}
      </div>
      <div className="relative h-4 mt-1 ml-0">
        <span className="absolute left-0 text-gray-500" style={{ fontSize: 10 }}>
          {new Date(startMs).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
        </span>
        {ticks.map((t, i) => (
          <span key={i} className="absolute text-gray-600"
            style={{ left: `${t.pct}%`, transform: 'translateX(-50%)', fontSize: 10 }}>
            {t.label}
          </span>
        ))}
        <span className="absolute right-0 text-gray-500" style={{ fontSize: 10 }}>
          {new Date(endMs).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
        </span>
      </div>
    </div>
  )
}