"use client";

import React from "react";
import { FeatherAlertTriangle, FeatherInbox } from "@subframe/core";
import { STATUS_FARBEN } from "../../utils/chartTheme";
import { PageContainer } from "./PageContainer";
import type { VMState } from "../../view-models";

/**
 * Nicht-fertige Zustände einer Seite: idle · loading · empty · error.
 *
 * Der Prototyp lief bisher nur im Zustand „Daten da". Die Cloud verlangt alle
 * fünf (`VMState`), und die Zustände sind dort Pflicht in der Definition of
 * Done. Sie hier zu haben kostet wenig und erspart beim Einbau, sie nachträglich
 * in jede Seite einzuweben.
 *
 * Gestaltung bewusst zurückhaltend: Das sind Übergänge, keine Inhalte.
 */
export function SeitenZustand({ vm }: { vm: VMState<unknown> }) {
  if (vm.status === "ready") return null;

  return (
    <PageContainer>
      <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border-default bg-white px-6 py-12 text-center">
        {vm.status === "loading" || vm.status === "idle" ? (
          <>
            <span className="flex flex-col items-center gap-3" aria-live="polite">
              <span className="h-6 w-6 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-500" />
              <span className="text-[13px] text-text-neutral-tertiary">Kennzahlen werden berechnet …</span>
            </span>
            {/* Skelett statt Sprung: die Karten stehen später an derselben Stelle. */}
            <div className="mt-4 grid w-full max-w-3xl grid-cols-2 gap-4 lg:grid-cols-4">
              {[0, 1, 2, 3].map((i) => (
                <span key={i} className="h-[104px] animate-pulse rounded-lg bg-neutral-100" />
              ))}
            </div>
          </>
        ) : vm.status === "empty" ? (
          <>
            <FeatherInbox className="text-[24px] text-text-neutral-tertiary" />
            <span className="text-[15px] font-semibold text-text-neutral-primary">
              Keine Daten für diese Auswahl
            </span>
            <span className="max-w-[380px] text-[13px] text-text-neutral-tertiary">
              Die gesetzten Filter schneiden alles weg. Zeitraum erweitern oder einzelne
              Einschränkungen in der Filterleiste entfernen.
            </span>
          </>
        ) : (
          <>
            <FeatherAlertTriangle className="text-[24px]" style={{ color: STATUS_FARBEN.negativ }} />
            <span className="text-[15px] font-semibold text-text-neutral-primary">
              Kennzahlen konnten nicht geladen werden
            </span>
            <span className="max-w-[380px] text-[13px] text-text-neutral-tertiary">
              {vm.error?.messageKey ?? "Unbekannter Fehler"}
            </span>
          </>
        )}
      </div>
    </PageContainer>
  );
}