<script>
  import { page } from "$app/stores";
  import { goto } from "$app/navigation";
  import "../styles/errorpage.css";

  $: status = $page.status || 500;
  $: message = $page.error?.message || "Something went wrong";

  function goBack() {
    history.back();
  }
</script>

<svelte:head>
  <title>Error {status} — Project Optima</title>
</svelte:head>

<div class="error-page">
  <div class="error-pane">
    <!-- Pane header -->
    <div class="error-pane-header">
      <h2 class="error-pane-title">Error</h2>
      <span class="error-status-badge">{status}</span>
    </div>

    <!-- Pane body -->
    <div class="error-pane-body">
      <div class="error-illustration">
        <svg viewBox="0 0 120 120" width="120" height="120" aria-hidden="true">
          <circle
            cx="60"
            cy="60"
            r="56"
            fill="var(--error-circle-outer)"
            stroke="var(--error-circle-stroke)"
            stroke-width="2"
          />
          <circle cx="60" cy="60" r="40" fill="var(--error-circle-inner)" />
          <path
            d="M60 35v30"
            stroke="#dc2626"
            stroke-width="5"
            stroke-linecap="round"
          />
          <circle cx="60" cy="78" r="4" fill="#dc2626" />
        </svg>
      </div>

      <h3 class="error-heading">Oops! Something went wrong</h3>
      <p class="error-message">{message}</p>
      <p class="error-hint">
        Please try again or contact support if the problem persists.
      </p>

      <div class="error-actions">
        <button class="btn btn-primary" on:click={goBack}>
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="16"
            height="16"
          >
            <path d="M19 12H5M12 19l-7-7 7-7" />
          </svg>
          Go Back
        </button>
        <a href="/" class="btn btn-secondary">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="16"
            height="16"
          >
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <polyline points="9 22 9 12 15 12 15 22" />
          </svg>
          Go Home
        </a>
      </div>
    </div>
  </div>
</div>
