import type { Notification, NotificationAction, NotificationLevel } from '../types/dashboard'

type Props = {
  notifications: Notification[]
  onReplan?: () => void
  onImportPrices?: () => void
  onSwitchAuto?: () => void
}

const LEVEL_STYLES: Record<
  NotificationLevel,
  { bg: string; border: string; icon: string; iconClass: string }
> = {
  success: {
    bg: '#1D9E7508',
    border: '#1D9E7544',
    icon: '⚡',
    iconClass: 'text-emerald-500',
  },
  info: {
    bg: '#E6F1FB08',
    border: '#378ADD44',
    icon: 'ℹ',
    iconClass: 'text-blue-400',
  },
  warning: {
    bg: '#EF9F2708',
    border: '#EF9F2744',
    icon: '⚠',
    iconClass: 'text-amber-400',
  },
  error: {
    bg: '#E24B4A08',
    border: '#E24B4A44',
    icon: '✕',
    iconClass: 'text-red-400',
  },
}

function fmtEtaMinutes(mins: number): string {
  const h = Math.floor(mins / 60)
  const m = mins % 60
  if (h > 0) return `za ${h}h ${m}min`
  return `za ${m}min`
}

function ActionControls({
  action,
  onReplan,
  onImportPrices,
  onSwitchAuto,
}: {
  action: NotificationAction | null | undefined
  onReplan?: () => void
  onImportPrices?: () => void
  onSwitchAuto?: () => void
}) {
  if (action === 'connect_ev') {
    return (
      <span className="rounded-md bg-slate-800 px-2 py-0.5 text-[10px] font-semibold uppercase text-slate-300">
        Připoj auto
      </span>
    )
  }
  if (action === 'replan') {
    return (
      <button
        type="button"
        onClick={onReplan}
        className="rounded-md border border-slate-600 bg-slate-900/60 px-2 py-1 text-xs font-medium text-slate-100 hover:bg-slate-800"
      >
        Přeplánovat nyní
      </button>
    )
  }
  if (action === 'import_prices') {
    return (
      <button
        type="button"
        onClick={onImportPrices}
        className="rounded-md border border-slate-600 bg-slate-900/60 px-2 py-1 text-xs font-medium text-slate-100 hover:bg-slate-800"
      >
        Importovat ceny
      </button>
    )
  }
  if (action === 'switch_auto') {
    return (
      <button
        type="button"
        onClick={onSwitchAuto}
        className="rounded-md border border-emerald-700/60 bg-emerald-950/40 px-2 py-1 text-xs font-medium text-emerald-100 hover:bg-emerald-900/50"
      >
        Přepnout na AUTO
      </button>
    )
  }
  return null
}

export function NotificationBar({ notifications, onReplan, onImportPrices, onSwitchAuto }: Props) {
  const shown = notifications.slice(0, 2)
  if (shown.length === 0) return null

  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
      {shown.map((n) => {
        const st = LEVEL_STYLES[n.level] ?? LEVEL_STYLES.info!
        return (
          <div
            key={n.id}
            className="flex gap-3 rounded-xl border px-3 py-2.5 text-sm"
            style={{ backgroundColor: st.bg, borderColor: st.border }}
          >
            <span className={`shrink-0 text-lg leading-none ${st.iconClass}`} aria-hidden>
              {st.icon}
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-2">
                <p className="font-bold text-slate-100">{n.title}</p>
                {n.eta_minutes != null && n.eta_minutes >= 0 ? (
                  <span className="text-xs text-slate-400">{fmtEtaMinutes(n.eta_minutes)}</span>
                ) : null}
              </div>
              <p className="mt-0.5 text-slate-300">{n.body}</p>
              <div className="mt-2 flex flex-wrap items-center gap-2">
                <ActionControls
                  action={n.action}
                  onReplan={onReplan}
                  onImportPrices={onImportPrices}
                  onSwitchAuto={onSwitchAuto}
                />
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
