import { useRef, useState, useEffect, useCallback } from 'react'

function fmtMs(sec) {
  return `${(sec * 1000).toFixed(0)}ms`
}

function fmtSec(sec) {
  return sec < 10 ? `${sec.toFixed(2)}s` : `${sec.toFixed(1)}s`
}

export default function LoopTrimmer({ slot, slotIdx, bpm, audioCtxRef, onCommit, onCancel }) {
  const canvasRef    = useRef(null)
  const containerRef = useRef(null)
  const previewRef   = useRef(null)   // AudioBufferSourceNode for preview

  const [trimStart, setTrimStart] = useState(slot.trimStart)
  const [trimEnd,   setTrimEnd]   = useState(slot.trimEnd)
  const [previewing, setPreviewing] = useState(false)

  // Refs so drag closures always have current values
  const trimStartRef = useRef(trimStart)
  const trimEndRef   = useRef(trimEnd)
  useEffect(() => { trimStartRef.current = trimStart }, [trimStart])
  useEffect(() => { trimEndRef.current   = trimEnd   }, [trimEnd])

  const duration    = slot.audioBuffer?.duration ?? 0
  const startSec    = trimStart * duration
  const endSec      = trimEnd   * duration
  const selectedSec = endSec - startSec

  // Beat grid info — visual reference only, no snapping
  const beatSec = bpm ? 60 / bpm : null
  const barSec  = beatSec ? beatSec * 4 : null

  // Stop preview when handles change
  useEffect(() => {
    if (previewing) stopPreview()
  }, [trimStart, trimEnd]) // eslint-disable-line react-hooks/exhaustive-deps

  // Cleanup on unmount
  useEffect(() => {
    return () => stopPreview()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  function stopPreview() {
    try { previewRef.current?.stop() } catch {}
    previewRef.current = null
    setPreviewing(false)
  }

  function togglePreview() {
    if (previewing) { stopPreview(); return }
    const ctx = audioCtxRef?.current
    const buf = slot.audioBuffer
    if (!ctx || !buf) return

    // Resume context if suspended
    if (ctx.state === 'suspended') ctx.resume().catch(() => {})

    const sr          = buf.sampleRate
    const startSample = Math.floor(trimStartRef.current * buf.length)
    const endSample   = Math.ceil(trimEndRef.current   * buf.length)
    const len         = Math.max(1, endSample - startSample)
    const data        = buf.getChannelData(0).slice(startSample, endSample)

    const previewBuf  = ctx.createBuffer(1, len, sr)
    previewBuf.copyToChannel(data, 0)

    const node = ctx.createBufferSource()
    node.buffer    = previewBuf
    node.loop      = true
    node.loopStart = 0
    node.loopEnd   = len / sr
    node.connect(ctx.destination)
    node.start()
    node.onended = () => { previewRef.current = null; setPreviewing(false) }

    previewRef.current = node
    setPreviewing(true)
  }

  // Snap end handle to N bars from current start
  function snapBars(n) {
    if (!barSec || !duration) return
    const newEnd = Math.min(1, trimStartRef.current + (n * barSec) / duration)
    setTrimEnd(newEnd)
    trimEndRef.current = newEnd
    draw()
  }

  // ── Canvas draw ─────────────────────────────────────────────────────────────
  const draw = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas || !slot.waveform) return
    const rect = canvas.getBoundingClientRect()
    if (rect.width === 0) return
    const dpr = window.devicePixelRatio ?? 1
    canvas.width  = rect.width  * dpr
    canvas.height = rect.height * dpr
    const ctx = canvas.getContext('2d')
    ctx.scale(dpr, dpr)
    const W  = rect.width
    const H  = rect.height
    const wf = slot.waveform
    const N  = wf.length
    const ts = trimStartRef.current
    const te = trimEndRef.current

    // Background
    ctx.fillStyle = '#0f0f0f'
    ctx.fillRect(0, 0, W, H)

    // Dim regions outside selection
    ctx.fillStyle = 'rgba(0,0,0,0.6)'
    ctx.fillRect(0, 0, ts * W, H)
    ctx.fillRect(te * W, 0, W - te * W, H)

    // Beat grid — visual only, beat lines then bar lines (bars on top)
    if (beatSec && duration) {
      // Beat lines
      ctx.strokeStyle = 'rgba(255,255,255,0.10)'
      ctx.lineWidth   = 1
      for (let t = 0; t <= duration; t += beatSec) {
        const isBar = barSec ? (t % barSec) < beatSec * 0.4 : false
        if (!isBar) {
          const x = (t / duration) * W
          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
        }
      }
      // Bar lines (brighter, thicker)
      if (barSec) {
        ctx.strokeStyle = 'rgba(168,85,247,0.55)'
        ctx.lineWidth   = 1.5
        for (let t = 0; t <= duration; t += barSec) {
          const x = (t / duration) * W
          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
          // Bar number label
          const barNum = Math.round(t / barSec)
          if (barNum > 0) {
            ctx.fillStyle = 'rgba(168,85,247,0.5)'
            ctx.font = `${9 * dpr / dpr}px monospace`
            ctx.fillText(`${barNum}`, x + 3, 10)
          }
        }
      }
    }

    // Waveform bars
    const mid = H / 2
    for (let i = 0; i < N; i++) {
      const x     = (i / N) * W
      const barW  = Math.max(1, W / N - 0.5)
      const inSel = (i / N) >= ts && (i / N) <= te
      ctx.fillStyle = inSel ? '#a855f7' : '#3b0764'
      const h = wf[i] * mid * 0.88
      ctx.fillRect(x, mid - h, barW, h * 2)
    }

    // Handle lines
    ctx.strokeStyle = '#a855f7'
    ctx.lineWidth   = 2
    ctx.beginPath(); ctx.moveTo(ts * W, 0); ctx.lineTo(ts * W, H); ctx.stroke()
    ctx.beginPath(); ctx.moveTo(te * W, 0); ctx.lineTo(te * W, H); ctx.stroke()
  }, [slot.waveform, beatSec, barSec, duration])

  useEffect(() => { draw() }, [draw, trimStart, trimEnd])
  useEffect(() => {
    const id = requestAnimationFrame(() => draw())
    return () => cancelAnimationFrame(id)
  }, [draw])

  // ── Pointer → fraction ──────────────────────────────────────────────────────
  function fracFromClientX(clientX) {
    const el = containerRef.current
    if (!el) return 0
    const rect = el.getBoundingClientRect()
    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
  }

  // ── Drag handles — free movement, no snapping ───────────────────────────────
  function handleMouseDown(handle) {
    return (e) => {
      e.preventDefault()
      function onMove(ev) {
        const raw = fracFromClientX(ev.clientX)
        if (handle === 'start') {
          const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
          setTrimStart(c); trimStartRef.current = c
        } else {
          const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
          setTrimEnd(c); trimEndRef.current = c
        }
        draw()
      }
      function onUp() {
        window.removeEventListener('mousemove', onMove)
        window.removeEventListener('mouseup', onUp)
      }
      window.addEventListener('mousemove', onMove)
      window.addEventListener('mouseup', onUp)
    }
  }

  // Click canvas to move nearest handle
  function handleCanvasClick(e) {
    if (e.target !== canvasRef.current) return
    const raw = fracFromClientX(e.clientX)
    if (Math.abs(raw - trimStart) <= Math.abs(raw - trimEnd)) {
      const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
      setTrimStart(c); trimStartRef.current = c
    } else {
      const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
      setTrimEnd(c); trimEndRef.current = c
    }
    draw()
  }

  return (
    <div className="border-t border-border">
      {/* Header row */}
      <div className="flex items-center justify-between px-4 pt-3 pb-1">
        <span className="text-[11px] uppercase tracking-wider text-gray-500">
          Trim — Loop {slotIdx + 1}
        </span>
        <div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
          <span className="text-gray-600">{fmtMs(startSec)} → {fmtMs(endSec)}</span>
          <span className="text-accent font-semibold">{fmtSec(selectedSec)}</span>
        </div>
      </div>

      {/* Waveform + handles */}
      <div
        ref={containerRef}
        className="relative mx-4 h-20 rounded-lg overflow-visible cursor-crosshair select-none"
        onClick={handleCanvasClick}
      >
        <canvas ref={canvasRef} className="w-full h-full block rounded-lg" />

        {/* Left handle */}
        <div
          className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
          style={{ left: `${trimStart * 100}%` }}
          onMouseDown={handleMouseDown('start')}
          onClick={e => e.stopPropagation()}
        >
          <div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
          <div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
          <div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
            {fmtMs(startSec)}
          </div>
        </div>

        {/* Right handle */}
        <div
          className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
          style={{ left: `${trimEnd * 100}%` }}
          onMouseDown={handleMouseDown('end')}
          onClick={e => e.stopPropagation()}
        >
          <div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
          <div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
          <div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
            {fmtMs(endSec)}
          </div>
        </div>
      </div>

      {/* Toolbar: preview + bar snap + hint */}
      <div className="flex items-center gap-2 px-4 pt-2 pb-1 flex-wrap">
        {/* Preview play/stop */}
        <button
          onClick={togglePreview}
          className={`flex items-center gap-1 px-2.5 py-1 rounded-lg border text-xs font-medium transition-all ${
            previewing
              ? 'bg-accent/20 border-accent text-accent'
              : 'bg-surface border-border text-gray-400 hover:text-white hover:border-gray-500'
          }`}
          title="Preview loop selection"
        >
          {previewing
            ? <><span>⏹</span><span>Stop</span></>
            : <><span>▶</span><span>Preview</span></>
          }
        </button>

        {/* Bar snap buttons — only if BPM is set */}
        {barSec && duration && (
          <div className="flex items-center gap-1 ml-1">
            <span className="text-[10px] text-gray-600 uppercase tracking-wider mr-0.5">snap end →</span>
            {[1, 2, 4].map(n => {
              const endFrac = trimStart + (n * barSec) / duration
              const fits    = endFrac <= 1.02
              return (
                <button
                  key={n}
                  onClick={() => snapBars(n)}
                  disabled={!fits}
                  className="px-2 py-0.5 rounded border border-border text-[10px] text-gray-400 hover:text-accent hover:border-accent/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                  title={`Set end to ${n} bar${n > 1 ? 's' : ''} from start`}
                >
                  {n} bar{n > 1 ? 's' : ''}
                </button>
              )
            })}
          </div>
        )}

        <span className="ml-auto text-[10px] text-gray-700">
          {bpm ? `${bpm} BPM grid` : 'no BPM — trim freely'}
        </span>
      </div>

      {/* Action buttons */}
      <div className="flex gap-2 px-4 pb-3">
        <button
          onClick={() => { stopPreview(); onCommit(slotIdx, trimStart, trimEnd) }}
          className="px-5 py-1.5 bg-accent text-white text-sm font-bold rounded-lg hover:bg-accent/80 transition-colors"
        >
          Set Loop ▶
        </button>
        <button
          onClick={() => { stopPreview(); onCommit(slotIdx, 0, 1) }}
          className="px-4 py-1.5 bg-surface border border-border text-gray-400 text-sm rounded-lg hover:text-white hover:border-gray-500 transition-colors"
          title="Use the full recording without trimming"
        >
          Use Full
        </button>
        <button
          onClick={() => { stopPreview(); onCancel(slotIdx) }}
          className="px-4 py-1.5 bg-surface border border-border text-gray-500 text-sm rounded-lg hover:text-red-400 hover:border-red-800 transition-colors ml-auto"
        >
          Re-record
        </button>
      </div>
    </div>
  )
}