import { useEffect, useState } from 'react'
import type { Salarie } from '@/types/type'
import { formatDate } from '@/utils/formatter'
import DisciplinairesPanel, {
  type Disciplinaire,
  type DisciplinaireForm,
  type TypeSanction,
} from './DisciplinairesPanel'

type Props = {
  salarie: Salarie | null
}

export default function DisciplinairesTab({ salarie }: Props) {
  const [disciplinaires, setDisciplinaires] = useState<Disciplinaire[]>([])
  const [typesSanctions, setTypesSanctions] = useState<TypeSanction[]>([])
  const [selectedDisciplinaire, setSelectedDisciplinaire] =
    useState<Disciplinaire | null>(null)
  const [isPanelOpen, setIsPanelOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)

  function authHeaders(withJson = false): HeadersInit {
    const token = localStorage.getItem('token')

    return {
      ...(withJson ? { 'Content-Type': 'application/json' } : {}),
      Authorization: `Bearer ${token}`,
    }
  }

  async function refreshDisciplinaires() {
    if (!salarie?.COS) {
      setDisciplinaires([])
      return
    }

    setLoading(true)

    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/employes/${salarie.COS}/disciplinaires`,
        {
          headers: authHeaders(),
          cache: 'no-store',
        },
      )

      if (!response.ok) {
        setDisciplinaires([])
        return
      }

      const data = await response.json()
      setDisciplinaires(data.items ?? [])
    } finally {
      setLoading(false)
    }
  }

  async function refreshTypesSanctions() {
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/sanctions`,
        {
          headers: authHeaders(),
          cache: 'no-store',
        },
      )

      if (!response.ok) return

      const data = await response.json()
      setTypesSanctions(data.items ?? [])
    } catch {
      // Le formulaire reste utilisable en saisie libre si le référentiel
      // des sanctions n'est pas encore disponible.
    }
  }

  useEffect(() => {
    setSelectedDisciplinaire(null)
    setIsPanelOpen(false)
    refreshDisciplinaires()
    refreshTypesSanctions()
  }, [salarie?.COS])

  async function handleSave(form: DisciplinaireForm) {
    if (!salarie?.COS || saving) return

    setSaving(true)

    try {
      const body = {
        num_salarie: salarie.COS,
        sanction: form.sanction.trim(),
        datedu: form.datedu || null,
        dateau: form.dateau || null,
        commentaire: form.commentaire.trim() || null,
        libelle_date_buttoir: form.libelle_date_buttoir.trim() || null,
        date_buttoir: form.date_buttoir || null,
        arreter_alerte: form.arreter_alerte,
        motif: form.motif.trim() || null,
      }

      const url = selectedDisciplinaire
        ? `${process.env.NEXT_PUBLIC_API_URL}/api/disciplinaires/${selectedDisciplinaire.id}`
        : `${process.env.NEXT_PUBLIC_API_URL}/api/disciplinaires`

      const response = await fetch(url, {
        method: selectedDisciplinaire ? 'PUT' : 'POST',
        headers: authHeaders(true),
        body: JSON.stringify(body),
      })

      const result = await response.json().catch(() => null)

      if (!response.ok) {
        console.error('SAVE DISCIPLINAIRE BODY =', body)
        console.error('SAVE DISCIPLINAIRE RESULT =', result)
        alert(
          result?.message ??
            "Erreur lors de l'enregistrement de la sanction disciplinaire.",
        )
        return
      }

      setSelectedDisciplinaire(null)
      setIsPanelOpen(false)
      await refreshDisciplinaires()
    } finally {
      setSaving(false)
    }
  }

  async function handleDelete() {
    if (!selectedDisciplinaire || saving) return

    if (!confirm('Supprimer cette sanction disciplinaire ?')) return

    setSaving(true)

    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/disciplinaires/${selectedDisciplinaire.id}`,
        {
          method: 'DELETE',
          headers: authHeaders(),
        },
      )

      if (!response.ok) {
        const result = await response.json().catch(() => null)
        alert(result?.message ?? 'Erreur lors de la suppression.')
        return
      }

      setSelectedDisciplinaire(null)
      setIsPanelOpen(false)
      await refreshDisciplinaires()
    } finally {
      setSaving(false)
    }
  }

  return (
    <section className="flex max-h-[700px] w-full flex-col border border-slate-400 bg-white">
      <div className="flex items-center justify-between border-b border-slate-400 bg-slate-100 px-2 py-1">
        <h3 className="text-xs font-bold text-blue-700">
          Sanctions ({disciplinaires.length})
        </h3>

        <button
          type="button"
          onClick={() => {
            setSelectedDisciplinaire(null)
            setIsPanelOpen(true)
          }}
          className="border border-blue-700 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-700 hover:text-white"
        >
          + Ajouter
        </button>
      </div>

      <div className="overflow-auto">
        <div className="min-w-[1250px]">
          <div className="sticky top-0 z-10 grid grid-cols-[180px_170px_110px_100px_100px_100px_1fr_1fr] border-b border-slate-400 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700">
            <span>Sanction</span>
            <span>Date butoir</span>
            <span>Échéance</span>
            <span>Du</span>
            <span>Au</span>
            <span>Arrêt alerte</span>
            <span>Motif</span>
            <span>Commentaire</span>
          </div>

          <div className="max-h-[650px] overflow-y-auto">
            {loading ? (
              <p className="px-2 py-3 text-xs text-slate-500">
                Chargement des sanctions...
              </p>
            ) : disciplinaires.length === 0 ? (
              <p className="px-2 py-3 text-xs text-slate-500">
                Aucune sanction pour ce salarié.
              </p>
            ) : (
              disciplinaires.map((disciplinaire) => (
                <button
                  key={disciplinaire.id}
                  type="button"
                  onClick={() => {
                    setSelectedDisciplinaire(disciplinaire)
                    setIsPanelOpen(true)
                  }}
                  className="grid w-full grid-cols-[180px_170px_110px_100px_100px_100px_1fr_1fr] items-center border-b border-slate-200 px-2 py-1 text-left text-xs text-black hover:bg-slate-100"
                >
                  <span className="truncate" title={disciplinaire.sanction ?? ''}>
                    {disciplinaire.sanction ?? '-'}
                  </span>
                  <span
                    className="truncate"
                    title={disciplinaire.libelle_date_buttoir ?? ''}
                  >
                    {disciplinaire.libelle_date_buttoir ?? '-'}
                  </span>
                  <span>{formatDate(disciplinaire.date_buttoir)}</span>
                  <span>{formatDate(disciplinaire.datedu)}</span>
                  <span>{formatDate(disciplinaire.dateau)}</span>
                  <span>{disciplinaire.arreter_alerte ? 'Oui' : 'Non'}</span>
                  <span className="truncate" title={disciplinaire.motif ?? ''}>
                    {disciplinaire.motif ?? '-'}
                  </span>
                  <span
                    className="truncate"
                    title={disciplinaire.commentaire ?? ''}
                  >
                    {disciplinaire.commentaire ?? '-'}
                  </span>
                </button>
              ))
            )}
          </div>
        </div>
      </div>

      {isPanelOpen && (
        <DisciplinairesPanel
          disciplinaire={selectedDisciplinaire}
          typesSanctions={typesSanctions}
          saving={saving}
          onClose={() => {
            setSelectedDisciplinaire(null)
            setIsPanelOpen(false)
          }}
          onDelete={handleDelete}
          onSave={handleSave}
        />
      )}
    </section>
  )
}