export interface NegPricePrediction {
  predicted_date: string
  window_start_hour: number
  window_end_hour: number
  probability_pct: number
  expected_min_price: number | null
  reason: string
}

function pad2(n: number): string {
  return n.toString().padStart(2, '0')
}

function borderClass(pct: number): string {
  if (pct >= 70) return 'border-l-emerald-500'
  if (pct >= 50) return 'border-l-amber-400'
  return 'border-l-slate-500'
}

export function NegPricePanel({
  predictions,
  insufficientHistory = false,
}: {
  predictions: NegPricePrediction[]
  insufficientHistory?: boolean
}) {
  if (insufficientHistory) {
    return (
      <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4 text-sm text-slate-400">
        Predikce bude dostupná po 4 týdnech provozu.
      </div>
    )
  }

  if (!predictions.length) {
    return (
      <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4 text-sm text-slate-400">
        Žádné záporné ceny v příštích 7 dnech.
      </div>
    )
  }

  return (
    <div className="space-y-2">
      {predictions.map((p, i) => (
        <article
          key={`${p.predicted_date}-${p.window_start_hour}-${i}`}
          className={`rounded-lg border border-slate-800 border-l-4 bg-slate-900/60 py-3 pl-3 pr-4 ${borderClass(p.probability_pct)}`}
        >
          <p className="text-xs font-medium text-slate-300">
            {p.predicted_date} · {pad2(p.window_start_hour)}:00–{pad2(p.window_end_hour)}:00
          </p>
          <p className="mt-1 text-sm text-slate-400">{p.reason}</p>
          <p className="mt-2 text-xs tabular-nums text-slate-500">
            {p.probability_pct.toFixed(0)}% jistota
            {p.expected_min_price != null
              ? ` · očekávané min. ${p.expected_min_price.toFixed(2)} Kč/kWh`
              : ''}
          </p>
        </article>
      ))}
    </div>
  )
}
