// app/submit/settings/success/page.tsx
"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useMemo } from "react";

type Target =
  | "settings_fiber"
  | "settings_co2gan"
  | "settings_co2gal"
  | "settings_uv";

const TARGET_TO_LIST: Record<Target, string> = {
  settings_fiber: "/fiber-settings",
  settings_co2gan: "/co2-gantry-settings",
  settings_co2gal: "/co2-galvo-settings",
  settings_uv: "/uv-settings",
};

const TARGET_LABEL: Record<Target, string> = {
  settings_fiber: "Fiber",
  settings_co2gan: "CO₂ Gantry",
  settings_co2gal: "CO₂ Galvo",
  settings_uv: "UV",
};

export default function SuccessPage() {
  const sp = useSearchParams();
  const id = (sp.get("id") || "").trim();
  const target = (sp.get("target") || "settings_fiber") as Target;

  const listHref = TARGET_TO_LIST[target] || "/projects";
  const targetLabel = TARGET_LABEL[target] || "Settings";

  const title = useMemo(
    () => `Settings Submitted${id ? ` (#${id})` : ""}`,
    [id]
  );

  return (
    <main className="max-w-2xl mx-auto py-10 px-4 space-y-6">
      <div className="space-y-2">
        <h1 className="text-2xl font-semibold">{title}</h1>
        <p className="text-sm text-muted-foreground">
          Your submission was received successfully.
        </p>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        <Link
          className="inline-flex items-center justify-center rounded border px-3 py-2 hover:bg-muted"
          href={`/submit/settings?target=${encodeURIComponent(target)}`}
        >
          Submit Another ({targetLabel})
        </Link>
        <Link
          className="inline-flex items-center justify-center rounded border px-3 py-2 hover:bg-muted"
          href={listHref}
        >
          Go to {targetLabel} Database
        </Link>
      </div>

      {id ? (
        <p className="text-xs text-muted-foreground">
          Reference ID: <span className="font-mono">{id}</span>
        </p>
      ) : null}
    </main>
  );
}