"use client";

import * as React from "react";
import { Building2, MessageCircle, Phone, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

/**
 * Public-site fallback. If the backend is unreachable — an outage, a network
 * blip, or a disabled deployment — a visitor must never meet a crash screen:
 * this is the page ads land on. They get a calm message and, when the numbers
 * are configured, a way to reach the desk anyway.
 *
 * Set NEXT_PUBLIC_CONTACT_PHONE and NEXT_PUBLIC_CONTACT_WHATSAPP so the
 * contact buttons survive an outage — the real numbers live in the database,
 * which is exactly what is unavailable here.
 */
export default function ShowroomError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  React.useEffect(() => {
    console.error(error);
  }, [error]);
  const phone = process.env.NEXT_PUBLIC_CONTACT_PHONE ?? "";
  const whatsapp = (process.env.NEXT_PUBLIC_CONTACT_WHATSAPP ?? phone).replace(/[^\d]/g, "");

  return (
    <main className="flex min-h-dvh items-center justify-center bg-bg px-5 text-fg">
      <div className="w-full max-w-md text-center">
        <span className="brand-tile mx-auto flex size-12 items-center justify-center rounded-2xl text-white">
          <Building2 className="size-6" />
        </span>
        <h1 className="mt-5 font-display text-3xl font-medium tracking-tight sm:text-4xl">We&apos;ll be right back</h1>
        <p className="mt-2 text-sm text-fg-muted">
          Our booking site is briefly unavailable. Your dates are safe and nothing was lost — try again in a moment, or reach us directly and we&apos;ll take care of it.
        </p>
        <div className="mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center">
          <Button size="lg" className="rounded-xl" onClick={reset}>
            <RefreshCw /> Try again
          </Button>
          {whatsapp ? (
            <Button size="lg" variant="secondary" className="rounded-xl bg-[#25D366] text-white hover:bg-[#1fb857]" asChild>
              <a href={`https://wa.me/${whatsapp}`} target="_blank" rel="noreferrer">
                <MessageCircle /> WhatsApp
              </a>
            </Button>
          ) : null}
          {phone ? (
            <Button size="lg" variant="secondary" className="rounded-xl" asChild>
              <a href={`tel:${phone}`}>
                <Phone /> Call us
              </a>
            </Button>
          ) : null}
        </div>
        {error.digest ? <p className="mt-6 font-mono text-2xs text-fg-subtle">Reference {error.digest}</p> : null}
      </div>
    </main>
  );
}