import type { ReactElement } from "react";
import Link from "next/link";

export default function AuthenticatedNotFound(): ReactElement {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "60vh",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "24px",
          padding: "48px 40px",
          background: "var(--surface)",
          border: "1px solid var(--border)",
          borderRadius: "var(--r-xl)",
          boxShadow: "var(--shadow-md)",
          textAlign: "center",
          maxWidth: "420px",
          width: "100%",
        }}
      >
        {/* Compass icon in blue-tinted icon well */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: 56,
            height: 56,
            borderRadius: "var(--r-lg)",
            background: "rgba(47, 128, 255, 0.1)",
            color: "var(--ms-blue-400)",
          }}
        >
          <svg
            width="28"
            height="28"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <polygon
              points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
              fill="currentColor"
              stroke="none"
              opacity="0.3"
            />
            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
          </svg>
        </div>

        {/* 404 badge pill */}
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            padding: "4px 12px",
            borderRadius: "9999px",
            fontSize: "0.75rem",
            fontWeight: 600,
            fontFamily: "var(--mono)",
            background: "rgba(47, 128, 255, 0.15)",
            color: "var(--ms-blue-400)",
          }}
        >
          404
        </span>

        {/* Heading + description */}
        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
          <h2
            style={{
              fontSize: "1.25rem",
              fontWeight: 600,
              color: "var(--text)",
              margin: 0,
              letterSpacing: "-0.01em",
            }}
          >
            Page not found
          </h2>
          <p
            style={{
              fontSize: "0.875rem",
              color: "var(--muted)",
              margin: 0,
              lineHeight: 1.6,
            }}
          >
            This page doesn&apos;t exist or you may not have permission to view it.
          </p>
        </div>

        {/* Action buttons */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
            marginTop: "8px",
          }}
        >
          {/* Primary: Dashboard */}
          <Link
            href="/"
            style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              padding: "9px 20px",
              background: "var(--ms-blue-500)",
              color: "#ffffff",
              borderRadius: "var(--r)",
              fontSize: "0.875rem",
              fontWeight: 500,
              textDecoration: "none",
              transition: "opacity 0.15s ease",
            }}
          >
            Dashboard
          </Link>

          {/* Ghost: Settings */}
          <Link
            href="/settings"
            style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              padding: "9px 20px",
              background: "transparent",
              color: "var(--text-2)",
              border: "1px solid var(--border)",
              borderRadius: "var(--r)",
              fontSize: "0.875rem",
              fontWeight: 500,
              textDecoration: "none",
              transition: "all 0.15s ease",
            }}
          >
            Settings
          </Link>
        </div>
      </div>
    </div>
  );
}