"use client";

import { ReactNode } from "react";
import { Wrench } from "lucide-react";
import { useSettings } from "@/lib/data/settings-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

/**
 * Wraps the whole app (placed in layout.tsx, inside SettingsProvider).
 * When an admin flips maintenance_mode on in the App Settings panel, every
 * customer sees this screen instead of the app — no code change, no
 * redeploy, just the existing settings table (schema_09).
 */
export function MaintenanceGate({ children }: { children: ReactNode }) {
  const { settings } = useSettings();
  const { t } = useTranslation();

  if (!settings.maintenanceMode) {
    return <>{children}</>;
  }

  return (
    <div className="relative flex min-h-dvh flex-1 flex-col items-center justify-center gap-5 overflow-hidden bg-ink px-8 text-center">
      <div className="pointer-events-none absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-gold/20 blur-3xl" />
      <div className="relative flex h-20 w-20 items-center justify-center rounded-[2rem] bg-gradient-to-br from-gold-bright to-gold-dim shadow-glow-gold">
        <Wrench size={32} className="text-ink" strokeWidth={2} />
      </div>
      <div className="relative">
        <h1 className="font-display text-xl font-semibold text-paper">{t("maintenance.title")}</h1>
        <p className="mt-2 text-sm text-paper/60">{t("maintenance.body")}</p>
      </div>
    </div>
  );
}