"use client";

import { useState, type ReactNode } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { alertDialog } from "@/components/ui/Dialog";
import { ensureTablesAction } from "@/lib/forms/actions";
import type { FormsOverview } from "@/lib/forms/queries";

/**
 * Gemeinsamer Rahmen der drei Module, die auf der gemeinsamen Datenbank der
 * Website arbeiten (Ausschreibungen, Bewerbungen, Kontakt).
 *
 * Kümmert sich um alles, was die drei teilen: fehlende Konfiguration,
 * nicht erreichbare Datenbank und fehlende Tabellen.
 */
export function FormsShell({
  overview,
  tables,
  requiredTables,
  canManage,
  info,
  children,
}: {
  overview: FormsOverview;
  tables: Record<string, boolean>;
  /** Tabellen, ohne die dieser Bereich nichts anzeigen kann. */
  requiredTables: string[];
  canManage: boolean;
  /** Kurzer Zusatz in der Statuszeile, z. B. „3 offene Stellen". */
  info?: string;
  children: ReactNode;
}) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  if (!overview.online) {
    return (
      <section className="card" data-reveal>
        <div className="ui-empty">
          <span className="ui-empty-mark" style={{ color: "var(--pink)" }}>
            <Icon name="alert" size={26} />
          </span>
          <p className="ui-empty-title">
            {overview.configured
              ? "Gemeinsame Datenbank nicht erreichbar"
              : "Gemeinsame Datenbank nicht eingerichtet"}
          </p>
          <p className="ui-empty-text">
            {overview.configured
              ? "Die Zugangsdaten stehen, aber die Verbindung schlägt fehl. Dieser Bereich bleibt so lange leer — das übrige Team OS ist davon nicht betroffen."
              : "Trage FORMS_DATABASE_URL in die .env ein und starte den Server neu. Es ist die Datenbank, die sich Team OS und die öffentliche Website teilen."}
          </p>
          {overview.error ? (
            <p className="ui-empty-text vault-mono" style={{ fontSize: "0.78rem", opacity: 0.75 }}>
              {overview.error}
            </p>
          ) : null}
        </div>
      </section>
    );
  }

  const missing = requiredTables.filter((t) => tables[t] === false);

  const createTables = async () => {
    setBusy(true);
    const res = await ensureTablesAction();
    setBusy(false);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else {
      await alertDialog({ title: "Tabellen geprüft", message: res.info ?? "Erledigt." });
      router.refresh();
    }
  };

  return (
    <>
      {missing.length > 0 ? (
        <section className="card flex flex-wrap items-center gap-3" data-reveal>
          <span className="vault-mark" style={{ color: "var(--pink)" }}>
            <Icon name="alert" size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <div className="font-bold">Tabellen fehlen in der gemeinsamen Datenbank</div>
            <div className="text-muted text-sm">
              Es fehlen: {missing.join(", ")}. Sie werden mit dem vereinbarten Aufbau angelegt —
              vorhandene Tabellen bleiben unangetastet.
            </div>
          </div>
          {canManage ? (
            <button
              className="btn btn-primary btn-sm"
              onClick={() => void createTables()}
              disabled={busy}
            >
              <Icon name="plus" size={15} /> {busy ? "Legt an …" : "Tabellen anlegen"}
            </button>
          ) : null}
        </section>
      ) : null}

      <section className="card" data-reveal data-reveal-delay={60}>
        <div className="mb-4 flex flex-wrap items-center justify-end gap-3">
          <span className="badge">
            <span className="proto-dot" style={{ background: "#7ee787", width: 7, height: 7 }} />
            Verbunden{info ? ` · ${info}` : ""}
          </span>
        </div>
        {children}
      </section>
    </>
  );
}