import { useEffect, useRef } from 'react'
import { useStore } from '../store'

const LOG_COLOUR = { info: 'text-[#7fc4f0]', success: 'text-[#5fe0a0]', warn: 'text-[#f5c563]', error: 'text-[#f68c82]' }

export function RunPanel() {
  const { step, log } = useStore()
  const active = !step ? -1 : step.pct >= 100 ? STEPS.length : STEPS.indexOf(step.label)
  const logBox = useRef<HTMLDivElement>(null)
  useEffect(() => { logBox.current?.scrollTo(0, logBox.current.scrollHeight) }, [log.length])

  return (
    <div className="card">
      <div className="card-title">Run automation</div>
      <div className="mb-2 flex gap-3 text-[13px] font-bold">
        <span>{step?.label ?? 'Waiting to start'}</span>
        <span className="ml-auto text-accent">{step?.pct ?? 0}%</span>
      </div>
      <div className="mb-4 h-2 overflow-hidden rounded-lg bg-glass-strong">
        <div className="h-full transition-[width] duration-500" style={{ width: `${step?.pct ?? 0}%`, background: 'var(--progress-bg)' }} />
      </div>
      <ol aria-label="Steps">
        {STEPS.map((s, i) => {
          const c = i < active ? 'done' : i === active ? 'active' : 'pending'
          return (
            <li key={s} aria-current={c === 'active' ? 'step' : undefined}
              className={`mb-1.5 flex items-center gap-3 rounded-[10px] px-3 py-2.5 text-[13px] font-semibold ${c === 'done' ? 'bg-ok-bg text-ok' : c === 'active' ? 'bg-warn-bg text-warn' : 'opacity-50'}`}>
              <span className={`flex h-[22px] w-[22px] items-center justify-center rounded-full text-[11px] ${c === 'done' ? 'bg-ok text-white' : c === 'active' ? 'bg-warn text-white' : 'bg-glass-strong'}`}>
                {c === 'done' ? '✓' : i + 1}
              </span>
              {s}
            </li>
          )
        })}
      </ol>
      {/* OPTIONAL: checkpoint tracker goes here */}
      <div ref={logBox} role="log" aria-label="Run log"
        className="mt-3 max-h-[220px] overflow-y-auto rounded-xl bg-accent-dark px-3.5 py-3 font-mono text-[13px] leading-[1.85] text-[#9fb6c4]">
        {log.map((l, i) => <div key={i} className={LOG_COLOUR[l.type] ?? LOG_COLOUR.info}>{l.msg}</div>)}
      </div>
    </div>
  )
}