"use client";

import * as React from "react";
import Link from "next/link";
import { AlertCircle, RefreshCw, Home, Compass } from "lucide-react";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { translateError } from "@/lib/user-feedback";

export default function RootErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const feedback = translateError(error, "We encountered a temporary issue while loading this page.");

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4 sm:p-6 bg-[#fdfdf7] dark:bg-[#0f1115] text-foreground">
      <Card className="max-w-lg w-full rounded-3xl border border-[#d3d3d3] dark:border-[#282c37] bg-card shadow-samara overflow-hidden">
        <CardContent className="p-6 sm:p-10 text-center space-y-6">
          {/* Friendly Alert Icon */}
          <div className="mx-auto size-16 flex items-center justify-center rounded-2xl bg-[#ff4000]/10 text-[#ff4000] border border-[#ff4000]/20">
            <AlertCircle className="size-8" />
          </div>

          {/* Error Message */}
          <div className="space-y-2">
            <h1 className="text-2xl font-semibold tracking-tight text-foreground">
              {feedback.title}
            </h1>
            <p className="text-sm text-muted-foreground leading-relaxed">
              {feedback.message}
            </p>
            {feedback.actionHint && (
              <div className="mt-3 p-3 rounded-xl bg-[#f5f2de]/60 dark:bg-[#1a1e28] border border-[#e7e3e1] dark:border-[#2b3040] text-xs text-muted-foreground text-left">
                <strong>Helpful Tip:</strong> {feedback.actionHint}
              </div>
            )}
          </div>

          {/* Recovery Actions */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
            <Button
              variant="default"
              onClick={() => reset()}
              className="w-full sm:w-auto rounded-2xl gap-2 font-medium text-white shadow-sm"
            >
              <RefreshCw className="size-4" />
              <span>Try Again</span>
            </Button>

            <Link
              href="/properties"
              className={buttonVariants({
                variant: "outline",
                className: "w-full sm:w-auto rounded-2xl gap-2 font-medium",
              })}
            >
              <Compass className="size-4 text-primary" />
              <span>Browse Catalog</span>
            </Link>

            <Link
              href="/"
              className={buttonVariants({
                variant: "ghost",
                className: "w-full sm:w-auto rounded-2xl gap-2 font-medium text-muted-foreground",
              })}
            >
              <Home className="size-4" />
              <span>Homepage</span>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}