import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import DateTime_ from './DateTime.vue'
import MalioTimePicker from '../time/TimePicker.vue'

type DateTimeProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  min?: string
  max?: string
  clearable?: boolean
  editable?: boolean
  invalidMessage?: string
  inputClass?: string
  labelClass?: string
  groupClass?: string
}

const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
const mountDateTime = (props: DateTimeProps = {}) =>
  mount(DateTimeForTest, {props, attachTo: document.body})

describe('MalioDateTime', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
  })
  afterEach(() => vi.useRealTimers())

  describe('rendu', () => {
    it('affiche le label et l\'icône calendrier', () => {
      const wrapper = mountDateTime({label: 'Rendez-vous'})
      expect(wrapper.get('label').text()).toBe('Rendez-vous')
      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
    })

    it('affiche la valeur formatée date + heure dans le champ', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('20/05/2026 14:30')
    })
  })

  describe('popover', () => {
    it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
      expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
      expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
    })
  })

  describe('sélection', () => {
    it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      // heure système figée à 09:05
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    })

    it('applique l\'heure réglée avant le clic du jour', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
    })

    it('met à jour l\'heure quand une date est déjà choisie', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
    })

    it('initialise le champ heure depuis la valeur', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
    })
  })

  describe('bornes min/max', () => {
    it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
      const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
    })
  })

  describe('effacement', () => {
    it('émet null au clic sur la croix', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
    })
  })

  describe('accessibilité', () => {
    it('positionne aria-invalid et describedby sur erreur', () => {
      const wrapper = mountDateTime({error: 'Date requise'})
      const input = wrapper.get('[data-test="date-input"]')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(input.attributes('aria-describedby')).toBeTruthy()
      expect(wrapper.text()).toContain('Date requise')
    })
  })

  describe('saisie manuelle (editable)', () => {
    it('par défaut (editable=false) l\'input reste readonly', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      expect(wrapper.get('[data-test="date-input"]').attributes('readonly')).toBeDefined()
    })

    it('editable=true : l\'input n\'est plus readonly', () => {
      const wrapper = mountDateTime({editable: true})
      expect(wrapper.get('[data-test="date-input"]').attributes('readonly')).toBeUndefined()
    })

    it('émet le datetime ISO sur saisie clavier valide au blur', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('20/05/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T14:30:00'])
    })

    it('garde le texte et affiche « Date invalide » sur saisie invalide au blur', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('32/13/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      expect((input.element as HTMLInputElement).value).toBe('32/13/2026 14:30')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(wrapper.text()).toContain('Date invalide')
    })

    it('passe en erreur si le datetime saisi est hors min/max', async () => {
      const wrapper = mountDateTime({editable: true, min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('25/12/2026 10:00')
      await input.trigger('blur')
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      expect(wrapper.text()).toContain('Date invalide')
    })

    it('émet null sur saisie vidée au blur', async () => {
      const wrapper = mountDateTime({editable: true, modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('')
      await input.trigger('blur')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
    })

    it('valide et ferme le popover sur Entrée', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.trigger('focus')
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
      await input.setValue('20/05/2026 14:30')
      await input.trigger('keydown', {key: 'Enter'})
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T14:30:00'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    })

    it('utilise le message invalidMessage personnalisé', async () => {
      const wrapper = mountDateTime({editable: true, invalidMessage: 'Format incorrect'})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('99/99/9999 10:00')
      await input.trigger('blur')
      expect(wrapper.text()).toContain('Format incorrect')
    })

    it('efface l\'erreur de saisie quand modelValue change de l\'extérieur', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('32/13/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.text()).toContain('Date invalide')
      await wrapper.setProps({modelValue: '2026-05-20T14:30:00'})
      expect(wrapper.text()).not.toContain('Date invalide')
    })
  })

  describe('gabarit de saisie (editable)', () => {
    it('affiche le gabarit date+heure complet en gris quand editable + focus + vide', async () => {
      const wrapper = mountDateTime({editable: true})
      await wrapper.get('[data-test="date-input"]').trigger('focus')
      expect(wrapper.get('[data-test="format-ghost"]').text().replace(/\xa0/g, ' ')).toBe('JJ/MM/AAAA HH:MM')
      expect(wrapper.get('[data-test="ghost-remaining"]').classes()).toContain('text-m-muted')
    })

    it('remplit le gabarit au fur et à mesure de la saisie', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.trigger('focus')
      await input.setValue('190520')
      expect(wrapper.get('[data-test="format-ghost"]').text().replace(/\xa0/g, ' ')).toBe('19/05/20AA HH:MM')
      expect(wrapper.get('[data-test="ghost-typed"]').text()).toBe('19/05/20')
    })

    it('n\'affiche pas de gabarit en mode non editable', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="format-ghost"]').exists()).toBe(false)
    })
  })

  describe('état de validité (update:valid)', () => {
    it('émet valid=true au montage avec une valeur valide', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('émet valid=true au montage quand le champ est vide', () => {
      const wrapper = mountDateTime()
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('émet valid=true sur saisie clavier valide', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('20/05/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('émet valid=false sur saisie malformée sans émettre modelValue', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('32/13/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([false])
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    })

    it('émet valid=true sur saisie vidée même si le champ est requis', async () => {
      const wrapper = mountDateTime({editable: true, required: true, modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('')
      await input.trigger('blur')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('émet valid=true sur clear', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('émet valid=true quand on sélectionne une date au calendrier', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })

    it('repasse valid=true quand modelValue change de l\'extérieur après une saisie invalide', async () => {
      const wrapper = mountDateTime({editable: true})
      const input = wrapper.get('[data-test="date-input"]')
      await input.setValue('32/13/2026 14:30')
      await input.trigger('blur')
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([false])
      await wrapper.setProps({modelValue: '2026-05-20T14:30:00'})
      expect(wrapper.emitted('update:valid')?.at(-1)).toEqual([true])
    })
  })
})