/**
 * `PluginLayoutFallback` — shown in place of a plugin-provided layout when its
 * provider is unavailable (ticket #43, F4, carnet v2 §3.4): "l'UI rend `Layout
 * indisponible`, provenance si connue, actions `Ouvrir Plugins` et `Choisir un
 * autre layout`." Never mutates the persisted layout — the domain keeps the
 * cell's opaque identity/state untouched so it recovers automatically if the
 * plugin comes back (re-enabled/reinstalled) on a later restart.
 *
 * The canonical `CustomPluginLayoutCell` payload (carnet v2 §3.2) carries no
 * display name on the wire — only `pluginId`. The caller resolves a friendly
 * name from the plugin admin list/runtime registry when it can; this falls
 * back to the raw `pluginId` so provenance is still always shown ("si
 * connue" is satisfied by the id itself, which is always known).
 */

import type { CustomPluginLayoutCell, PluginLayoutAvailability } from "@/domain";
import { Button, Panel } from "@/shared";

const REASON_LABEL: Record<Exclude<PluginLayoutAvailability, "available">, string> = {
  "plugin-disabled": "Le plugin fournisseur est désactivé.",
  "plugin-missing": "Le plugin fournisseur n'est pas installé.",
  incompatible: "Le plugin fournisseur ne déclare plus ce type de layout.",
};

interface PluginLayoutFallbackProps {
  cell: CustomPluginLayoutCell;
  availability: Exclude<PluginLayoutAvailability, "available">;
  /** Friendly provider name, resolved by the caller; falls back to `cell.pluginId`. */
  providerDisplayName?: string;
  onOpenPlugins: () => void;
  onChooseAnotherLayout: () => void;
}

export function PluginLayoutFallback({
  cell,
  availability,
  providerDisplayName,
  onOpenPlugins,
  onChooseAnotherLayout,
}: PluginLayoutFallbackProps) {
  return (
    <Panel className="flex h-full flex-col items-center justify-center gap-2 text-center">
      <p className="text-sm font-semibold text-content">Layout indisponible</p>
      <p className="text-xs text-muted">{REASON_LABEL[availability]}</p>
      <p className="text-xs text-faint">Fourni par « {providerDisplayName ?? cell.pluginId} »</p>
      <div className="mt-2 flex gap-2">
        <Button size="sm" variant="secondary" onClick={onOpenPlugins}>
          Ouvrir Plugins
        </Button>
        <Button size="sm" variant="ghost" onClick={onChooseAnotherLayout}>
          Choisir un autre layout
        </Button>
      </div>
    </Panel>
  );
}
