"use client";

/**
 * Sentry verification page. Visit /sentry-example-page in any
 * environment with NEXT_PUBLIC_SENTRY_DSN set, click both buttons,
 * and confirm two issues land in the Sentry dashboard (one client,
 * one server). Safe to keep around — it's gated on a click and not
 * linked from anywhere else in the app.
 */

import * as Sentry from "@sentry/nextjs";

export default function SentryExamplePage() {
  return (
    <main
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        padding: "2rem",
        fontFamily: "system-ui, -apple-system, sans-serif",
        gap: "1rem",
      }}
    >
      <h1 style={{ fontSize: "1.25rem" }}>Sentry verification</h1>
      <p style={{ color: "#666", maxWidth: "32rem", textAlign: "center" }}>
        Click each button to fire a test error. Both should land in the
        Sentry dashboard within a few seconds.
      </p>

      <button
        onClick={() => {
          throw new Error("Sentry test (client) — vibn-ai");
        }}
        style={btnStyle}
      >
        Throw client error
      </button>

      <button
        onClick={async () => {
          await Sentry.startSpan(
            { name: "sentry-test-server", op: "ui.click" },
            async () => {
              const res = await fetch("/api/sentry-example-api");
              if (!res.ok) {
                throw new Error("Sentry test (server) — vibn-ai");
              }
            },
          );
        }}
        style={btnStyle}
      >
        Throw server error
      </button>
    </main>
  );
}

const btnStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
  borderRadius: "0.375rem",
  border: "1px solid #ccc",
  background: "#f5f5f5",
  cursor: "pointer",
  fontFamily: "inherit",
};
