import { useState } from 'react'
import { MapPin, CheckCircle2 } from 'lucide-react'
import type { Note, RoleGroup, Take, Variant } from '@/types'
import { WaveformPlayer } from './WaveformPlayer'
import { Meter } from './Meter'
import { OrbitRail } from './OrbitRail'
import { mmss } from '@/lib/format'

interface Props {
  take: Take
  variant: Variant
  roleGroups: RoleGroup[]
  activeDb: number
  litFloorDb: number
  calibration: string
  notes: Note[]
  onAddNote: (t: number, text: string) => void
}

export function TakePanel({ take, variant, roleGroups, activeDb, litFloorDb, calibration, notes, onAddNote }: Props) {
  const [t, setT] = useState(0)
  const [draft, setDraft] = useState('')
  const master = take.masters[variant]

  const submit = () => {
    const text = draft.trim()
    if (!text) return
    onAddNote(t, text)
    setDraft('')
  }

  return (
    <section className="flex flex-col gap-4 rounded-lg border border-hairline bg-raised/40 p-4">
      <header className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h2 className="text-lg font-semibold tracking-tight">{take.label}</h2>
          <p className="flex items-center gap-1 text-xs text-ink-muted">
            <MapPin size={12} /> {take.gig} · {take.date}
          </p>
        </div>
        <span
          title={calibration}
          className="flex shrink-0 items-center gap-1 rounded-sm border border-hairline
                     px-1.5 py-0.5 text-[10px] text-ink-faint"
        >
          <CheckCircle2 size={11} className="text-ready" /> calibrated
        </span>
      </header>

      <WaveformPlayer url={`/audio/${master.file}`} dur={take.dur} onTime={setT} />

      <Meter master={master} loud={take.loud[variant]} currentTime={t} />

      <OrbitRail binS={take.binS} orbits={take.orbits} roleGroups={roleGroups} currentTime={t} activeDb={activeDb} litFloorDb={litFloorDb} />

      <div className="flex flex-col gap-2">
        <div className="flex items-center gap-2">
          <span className="font-mono text-xs text-ink-faint tnum">@ {mmss(t)}</span>
          <input
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && submit()}
            placeholder="note this moment…"
            className="min-w-0 flex-1 rounded-md border border-hairline bg-surface px-2 py-1
                       text-sm outline-none placeholder:text-ink-faint
                       focus-visible:ring-2 focus-visible:ring-magenta/60"
          />
          <button
            onClick={submit}
            className="rounded-md bg-raised px-3 py-1 text-xs font-medium text-ink
                       hover:bg-overlay disabled:opacity-30"
            disabled={!draft.trim()}
          >
            Mark
          </button>
        </div>
        {notes.length > 0 && (
          <ul className="flex flex-col gap-1">
            {notes.map((n) => (
              <li key={n.id} className="flex gap-2 text-xs">
                <span className="font-mono text-ink-faint tnum">{mmss(n.t)}</span>
                <span className="text-ink-muted">{n.text}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  )
}
