"use client";
import { useState, useEffect } from "react";
import type { DagelijkseCheckStatus } from "@/lib/hooks/useActualiteitDagelijkseCheck";

interface Props {
  status: DagelijkseCheckStatus;
}

export default function ActualiteitMelding({ status }: Props) {
  const [gesloten, setGesloten] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- bestaand, bewust opslag-synchronisatiepatroon (IndexedDB/localStorage -> formulierstate); zie eslint.config.mjs
    if (status.bezig) setGesloten(false);
  }, [status.bezig]);

  if (gesloten) return null;

  if (status.bezig) {
    return (
      <div className="px-6 py-2 bg-brand-50 border-b border-brand-100 flex items-center gap-2 text-xs text-brand-700 shrink-0">
        <svg className="animate-spin h-3 w-3" viewBox="0 0 24 24" fill="none">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
        </svg>
        <span>
          Actualiteit wetgeving controleren — {status.voortgang.huidig} van {status.voortgang.totaal} klaar
        </span>
      </div>
    );
  }

  if (status.klaar && status.aantalNietActueel > 0) {
    return (
      <div className="px-6 py-2 bg-amber-50 border-b border-amber-200 flex items-center justify-between text-xs text-amber-800 shrink-0">
        <span>
          ⚠{" "}
          <strong>
            {status.aantalNietActueel} wet{status.aantalNietActueel !== 1 ? "ten" : ""}
          </strong>{" "}
          {status.aantalNietActueel !== 1 ? "zijn" : "is"} mogelijk verouderd — bekijk de ActualiteitBadge per wet voor details.
        </span>
        <button
          onClick={() => setGesloten(true)}
          className="ml-4 text-amber-600 hover:text-amber-900 font-bold leading-none"
          aria-label="Melding sluiten"
        >
          ×
        </button>
      </div>
    );
  }

  return null;
}