import type { NegPriceItem } from '../../types/dashboard'

type Props = {
  items: NegPriceItem[]
}

function fmtTime(iso: string): string {
  return new Date(iso).toLocaleString('cs-CZ', {
    weekday: 'short',
    day: 'numeric',
    month: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'Europe/Prague',
  })
}

export function NegPricePanel({ items }: Props) {
  return (
    <section className="rounded-xl border border-slate-800/90 bg-slate-900/50 p-4">
      <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
        Záporné ceny (nadcházející)
      </h3>
      {items.length === 0 ? (
        <p className="mt-3 text-sm text-slate-500">V dostupných datech nejsou záporné ceny.</p>
      ) : (
        <ul className="mt-3 max-h-48 space-y-2 overflow-y-auto text-sm">
          {items.map((it) => (
            <li
              key={it.interval_start}
              className="flex flex-col gap-0.5 rounded-lg border border-slate-700/60 bg-slate-950/40 px-2 py-1.5"
            >
              <span className="text-slate-300">{fmtTime(it.interval_start)}</span>
              <span className="tabular-nums text-xs text-slate-400">
                nákup:{' '}
                <span className={it.buy != null && it.buy < 0 ? 'text-emerald-400' : ''}>
                  {it.buy == null ? '—' : `${it.buy.toFixed(3)} Kč/kWh`}
                </span>
                {' · '}
                prodej:{' '}
                <span className={it.sell != null && it.sell < 0 ? 'text-red-300' : ''}>
                  {it.sell == null ? '—' : `${it.sell.toFixed(3)} Kč/kWh`}
                </span>
              </span>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}
