"use client";

import { useMaintenanceMode } from "@/lib/api/dashboard/maintenance-api";
import { Button } from "@/components/ui/button";
import { useLocale, useTranslations } from "next-intl";

export function MaintenancePreviewView({ id }: { id: string }) {
  const locale = useLocale();
  const t = useTranslations("dashboard.settings");
  const isRtl = locale === "ar";
  const { maintenanceMode, isLoading } = useMaintenanceMode(id);

  if (isLoading) {
    return (
      <div className="animate-pulse overflow-hidden rounded-2xl border border-border bg-card">
        <div className="h-[320px] rounded-t-2xl bg-muted" />
        <div className="space-y-4 p-8 text-center">
          <div className="mx-auto h-6 w-48 rounded-lg bg-muted" />
          <div className="mx-auto h-4 w-3/4 rounded-lg bg-muted" />
          <div className="mx-auto h-12 w-32 rounded-xl bg-muted" />
        </div>
      </div>
    );
  }

  if (!maintenanceMode) return null;

  const title = isRtl
    ? (maintenanceMode.title_ar ?? maintenanceMode.title ?? maintenanceMode.title_en ?? "")
    : (maintenanceMode.title_en ?? maintenanceMode.title ?? maintenanceMode.title_ar ?? "");
  const description = isRtl
    ? (maintenanceMode.description_ar ?? maintenanceMode.description ?? maintenanceMode.description_en ?? "")
    : (maintenanceMode.description_en ?? maintenanceMode.description ?? maintenanceMode.description_ar ?? "");

  return (
    <section className="overflow-hidden rounded-2xl border border-border bg-card">
      <div className="h-[320px] bg-gradient-to-br from-primary/15 to-primary/5" />
      <div className="space-y-4 p-8 text-center">
        <h2 className="text-2xl font-bold text-foreground">{title}</h2>
        <p className="mx-auto max-w-2xl text-sm leading-7 text-muted-foreground">{description}</p>
        <Button type="button" className="h-12 rounded-xl px-8">
          {t("actions.close")}
        </Button>
      </div>
    </section>
  );
}