import { h, mount } from '../dom'
import { getBaseUrl, setBaseUrl, DEFAULT_BASE_URL } from '../config'
import { signOut } from '../store'
import { showToast } from '../toast'

export function renderPlus(root: HTMLElement, rerender: () => void): void {
  const serverInput = h('input', {
    class: 'w-full bg-slate-900/80 border border-slate-700/80 rounded-xl px-3.5 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-sky-500 transition-colors',
    value: getBaseUrl(),
    autocomplete: 'off',
    inputMode: 'url',
  })

  const legendItems: { icon: string; title: string; accent: string; desc: string }[] = [
    { icon: '☀️', title: 'Grand Soleil', accent: 'text-sky-400', desc: 'Journée calme. Aucun examen répertorié ni suspecté.' },
    { icon: '🌫️', title: 'Brouillard', accent: 'text-purple-400', desc: 'Zone d’incertitude. Rumeur ou sous-entendu d’un professeur.' },
    { icon: '💨', title: 'Coup de vent', accent: 'text-amber-400', desc: 'Interrogation surprise potentielle ou petit QCM (coeff faible).' },
    { icon: '🌩️', title: 'Orage / Pluie', accent: 'text-rose-400', desc: 'Devoir Surveillé (DS) confirmé ou évaluation de chapitre.' },
    { icon: '🚨', title: 'Alerte Rouge / Tempête', accent: 'text-red-500', desc: 'Examen blanc, épreuve commune ou gros devoir de fin de trimestre.' },
  ]

  mount(
    root,
    h(
      'div',
      { class: 'space-y-5' },
      h(
        'div',
        { class: 'bg-slate-800 border border-slate-700 rounded-2xl p-4' },
        h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-3' }, 'Serveur API'),
        serverInput,
        h('p', { class: 'text-[10px] text-slate-500 font-semibold mt-2' },
          'Adresse de l’API. Sur l’émulateur Android : 10.0.2.2:8787'),
        h(
          'button',
          {
            class: 'mt-3 w-full bg-sky-500 text-slate-950 text-xs font-extrabold py-2.5 rounded-xl active:scale-95 transition-transform',
            onclick: () => {
              setBaseUrl(serverInput.value.trim() || DEFAULT_BASE_URL)
              showToast('Adresse du serveur enregistrée', 'success')
              rerender()
            },
          },
          'Enregistrer l’adresse',
        ),
      ),
      h(
        'div',
        { class: 'bg-slate-800 border border-slate-700 rounded-2xl p-4' },
        h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-1' }, 'Session'),
        h(
          'button',
          {
            class: 'w-full bg-rose-500/10 border border-rose-500/25 text-rose-400 text-xs font-extrabold py-2.5 rounded-xl active:scale-95 transition-transform',
            onclick: () => {
              signOut()
              rerender()
            },
          },
          h('i', { class: 'fa-solid fa-right-from-bracket mr-1.5' }),
          'Se déconnecter',
        ),
      ),
      h('div', {},
        h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-2' }, 'Légende météorologique'),
        h('div', { class: 'grid grid-cols-1 gap-2.5' },
          ...legendItems.map((item) =>
            h(
              'div',
              { class: 'bg-slate-800/80 border border-slate-700/60 rounded-xl p-3 flex items-center gap-3' },
              h('span', { class: 'text-3xl' }, item.icon),
              h('div', {},
                h('h4', { class: `text-sm font-black ${item.accent}` }, item.title),
                h('p', { class: 'text-xs text-slate-300 font-medium' }, item.desc),
              ),
            ),
          ),
        ),
      ),
      h(
        'p',
        { class: 'text-[10px] text-slate-600 font-semibold text-center' },
        'Météo Exam — v0.1.0 · Radar de rumeurs et métriques en phase 2',
      ),
    ),
  )
}