"use client";

import { useEffect, useState } from "react";
import { Table, type TableColumn } from "@nexarch/shl";
import { ExpiringObject, ForbiddenError, fetchExpiringPreview } from "../../lib/api";

// Akzeptanzkriterium 2: Vorschauliste bald ablaufender Objekte (naechste 30
// Tage) - ruft dieselbe RET-06-API /retention-classes/preview auf, die
// intern dieselbe Funktion wie der periodische Job nutzt (RET-02), keine
// eigene Berechnung im Frontend.
export default function PreviewPage() {
  const [objects, setObjects] = useState<ExpiringObject[] | null>(null);
  const [forbidden, setForbidden] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  useEffect(() => {
    fetchExpiringPreview()
      .then(setObjects)
      .catch((err) => {
        if (err instanceof ForbiddenError) {
          setForbidden(true);
        } else {
          setLoadError(err instanceof Error ? err.message : "Vorschauliste konnte nicht geladen werden.");
        }
      });
  }, []);

  if (forbidden) {
    return (
      <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
        <p role="alert">Zugriff verweigert: Ihre Rolle ist nicht zur Fristenverwaltung berechtigt.</p>
      </main>
    );
  }
  if (loadError) {
    return (
      <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
        <p role="alert">{loadError}</p>
      </main>
    );
  }

  const columns: TableColumn<ExpiringObject>[] = [
    { key: "type", header: "Objekttyp", render: (o) => o.ObjectType },
    { key: "ref", header: "Referenz", render: (o) => o.ObjectReference },
    { key: "class", header: "Aufbewahrungsklasse", render: (o) => o.RetentionClass },
    { key: "due", header: "Fällig am", render: (o) => o.DueDate },
  ];

  return (
    <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
      <h1>In den nächsten 30 Tagen ablaufende Objekte</h1>
      {objects && (
        <Table columns={columns} rows={objects} rowKey={(o) => o.RetentionObjectID} caption="Bald ablaufende Objekte" />
      )}
    </main>
  );
}