"use client";

import { useEffect } from "react";
import Link from "next/link";
import { SmileyIcon } from "@/component/common/SmileyIcon";

export default function Error({
  error,
  reset,
  unstable_retry,
}: {
  error: Error & { digest?: string };
  reset?: () => void;
  unstable_retry?: () => void;
}) {
  useEffect(() => {
    // Log the error to console or error reporting service
    console.error(error);
  }, [error]);

  const handleRetry = () => {
    if (unstable_retry) {
      unstable_retry();
    } else if (reset) {
      reset();
    } else {
      window.location.reload();
    }
  };

  return (
    <div className="ds-page">
      <main
        className="ds-hero flex items-center justify-center min-h-[92vh]"
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          minHeight: "92vh",
          position: "relative",
          background: "#0F0F10",
          color: "#F4EFE1",
        }}
      >
        {/* Floating decorative cards for Error */}
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            pointerEvents: "none",
            zIndex: 0,
            opacity: 0.85,
          }}
        >
          <div
            className="ds-float-card ds-float-1"
            style={{
              top: "20%",
              left: "10%",
              background: "#181818",
              borderColor: "#2A2A2A",
              color: "#F4EFE1",
            }}
          >
            <span className="ds-float-check" style={{ background: "#E5484D" }}>
              <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
                <path
                  d="M3 3 L11 11 M11 3 L3 11"
                  stroke="white"
                  strokeWidth="2.4"
                  strokeLinecap="round"
                />
              </svg>
            </span>
            <div>
              An error occurred
              <span className="ds-float-meta" style={{ color: "#7A766B" }}>
                Application crashed
              </span>
            </div>
          </div>

          <div
            className="ds-float-card ds-float-2"
            style={{
              top: "25%",
              right: "12%",
              background: "#181818",
              borderColor: "#2A2A2A",
              color: "#F4EFE1",
            }}
          >
            <div
              style={{
                width: 36,
                height: 36,
                borderRadius: "50%",
                overflow: "hidden",
                flexShrink: 0,
                background: "#1E5EFF",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#fff",
                fontWeight: "bold",
                fontSize: 13,
              }}
            >
              !
            </div>
            <div>
              Need assistance?
              <span className="ds-float-meta" style={{ color: "#7A766B" }}>
                Contact Elegant IT support
              </span>
            </div>
          </div>

          <div
            className="ds-float-card ds-float-3"
            style={{
              bottom: "20%",
              left: "12%",
              background: "#1E5EFF",
              borderColor: "#0F3DBD",
              color: "#fff",
            }}
          >
            <div
              style={{
                width: 36,
                height: 36,
                borderRadius: "50%",
                overflow: "hidden",
                flexShrink: 0,
                background: "#0F0F10",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#1E5EFF",
              }}
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
              >
                <path
                  d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
            <div>
              Action: Retry
              <span className="ds-float-meta" style={{ color: "#CFDCFF" }}>
                Try re-fetching segments
              </span>
            </div>
          </div>

          <div
            className="ds-float-card ds-float-4"
            style={{
              bottom: "22%",
              right: "10%",
              background: "#181818",
              borderColor: "#2A2A2A",
              color: "#F4EFE1",
            }}
          >
            <span className="ds-float-check" style={{ background: "#1E5EFF" }}>
              <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
                <path
                  d="M2 7 L6 11 L12 3"
                  stroke="white"
                  strokeWidth="2.4"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
            <div>
              Elegant IT
              <span className="ds-float-meta" style={{ color: "#7A766B" }}>
                Est. 2017 · 170+ clients
              </span>
            </div>
          </div>
        </div>

        <div
          style={{
            textAlign: "center",
            position: "relative",
            maxWidth: 800,
            margin: "0 auto",
            padding: "0 32px",
            zIndex: 1,
          }}
        >
          <SmileyIcon
            faceColor="#E5484D"
            featColor="#0F0F10"
            spin={false}
            size={120}
            style={{ display: "block", margin: "0 auto 24px" }}
          />

          <div
            className="ds-hero-pill"
            style={{
              background: "rgba(229, 72, 77, 0.1)",
              color: "#FF7B7F",
              border: "1px solid rgba(229, 72, 77, 0.3)",
            }}
          >
            <span className="ds-hero-pulse" style={{ background: "#E5484D" }} />
            Something went wrong!
          </div>

          <h1
            className="ds-h-mega"
            style={{
              margin: "0 0 28px",
              fontSize: "clamp(54px, 8.4vw, 120px)",
              color: "#fff",
            }}
          >
            Systems got{" "}
            <span className="ds-italic" style={{ color: "#FF7B7F" }}>
              unstable.
            </span>
          </h1>

          <p
            className="ds-hero-sub"
            style={{ marginBottom: 40, color: "#C7C2B3" }}
          >
            An unexpected error occurred in our system. But don&apos;t worry,
            you can easily attempt to recover by clicking below, or head back to
            our main workspace.
          </p>

          {error.digest && (
            <div
              style={{
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.08)",
                padding: "12px 18px",
                borderRadius: "12px",
                fontFamily: "monospace",
                fontSize: "13px",
                color: "#8E8E96",
                marginBottom: "32px",
                display: "inline-block",
              }}
            >
              Digest: {error.digest}
            </div>
          )}

          <div
            style={{
              display: "flex",
              gap: 16,
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "wrap",
            }}
          >
            <button
              onClick={handleRetry}
              className="ds-btn ds-btn--lime ds-btn--lg"
            >
              Try again
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path
                  d="M13.5 2v6h-6M13.34 15.57a10 10 0 1 1-.57-8.38"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
            <Link
              href="/"
              className="ds-btn ds-btn--cream ds-btn--lg"
              style={{ color: "#0F0F10", background: "#F4EFE1" }}
            >
              Go back home
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
}