"use client";
import { useState } from "react";
import type { ActualiteitStatus } from "@/lib/db/regelgeving-db";

interface Props {
  wetId: string;
  bron: string;
  versie: string;
  status: ActualiteitStatus | undefined;
  onStatusUpdate: (status: ActualiteitStatus) => void;
}

type CheckStatus = "idle" | "bezig" | "klaar" | "fout";

export default function ActualiteitBadge({ wetId, bron, versie, status, onStatusUpdate }: Props) {
  const [checkStatus, setCheckStatus] = useState<CheckStatus>("idle");

  async function controleer() {
    setCheckStatus("bezig");
    try {
      const params = new URLSearchParams({ url: bron, versie });
      const res = await fetch(`/api/check-actualiteit?${params}`);
      const data = await res.json();

      const nyStatus: ActualiteitStatus = {
        wetId,
        datumGecontroleerd: new Date().toISOString(),
        gepubliceerdOp: data.gepubliceerdOp ?? undefined,
        isActueel: data.isActueel ?? true,
        melding: data.melding,
      };
      onStatusUpdate(nyStatus);
      setCheckStatus("klaar");
    } catch {
      setCheckStatus("fout");
    }
  }

  const dagenSindsControle = status?.datumGecontroleerd
    ? Math.floor((Date.now() - new Date(status.datumGecontroleerd).getTime()) / 86_400_000)
    : null;

  const waarschuwing = status && status.isActueel === false;
  const oud = dagenSindsControle !== null && dagenSindsControle > 90;

  return (
    <div className="flex items-center gap-2 flex-wrap text-xs">
      {/* Actueel / verouderd badge */}
      {status ? (
        <span
          className={`px-2 py-0.5 rounded-full border font-medium ${
            waarschuwing
              ? "bg-red-100 text-red-700 border-red-200"
              : oud
              ? "bg-amber-100 text-amber-700 border-amber-200"
              : "bg-green-100 text-green-700 border-green-200"
          }`}
          title={status.melding}
        >
          {waarschuwing ? "⚠ Nieuwe versie" : oud ? "~ Controle aanbevolen" : "✓ Actueel"}
        </span>
      ) : (
        <span className="px-2 py-0.5 rounded-full border bg-slate-100 text-slate-400 border-slate-200">
          Niet gecontroleerd
        </span>
      )}

      {/* Datum laatste controle */}
      {status?.datumGecontroleerd && (
        <span className="text-slate-400">
          Gecontroleerd: {new Date(status.datumGecontroleerd).toLocaleDateString("nl-BE")}
          {status.gepubliceerdOp && ` · Bron: ${new Date(status.gepubliceerdOp).toLocaleDateString("nl-BE")}`}
        </span>
      )}

      {/* Controleer knop */}
      {bron && (
        <button
          onClick={controleer}
          disabled={checkStatus === "bezig"}
          className={`px-2 py-0.5 rounded border transition-colors ${
            checkStatus === "bezig"
              ? "text-slate-400 border-slate-200 cursor-wait"
              : "text-indigo-600 border-indigo-200 hover:bg-indigo-50"
          }`}
        >
          {checkStatus === "bezig" ? "Controleren…" : "Controleer actualiteit"}
        </button>
      )}

      {/* Officiële bron link */}
      {bron && (
        <a
          href={bron}
          target="_blank"
          rel="noopener noreferrer"
          className="text-slate-400 hover:text-indigo-600"
          title="Open officiële bron"
        >
          ↗ Officiële bron
        </a>
      )}
    </div>
  );
}