"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Button } from "@/components/ui/button";

interface SupabaseSetupNoticeProps {
  nextPath: string | null;
}

export function SupabaseSetupNotice({ nextPath }: SupabaseSetupNoticeProps) {
  const t = useTranslations("auto.componentsAuthSupabaseSetupNotice");
  const router = useRouter();
  const isDev = process.env.NODE_ENV === "development";
  const continueHref = nextPath?.startsWith("/") ? nextPath : "/dashboard";

  return (
    <div className="mx-auto w-full max-w-md px-4 py-12 sm:py-16">
      <div className="rounded-xl border border-amber-200 bg-amber-50 p-6 text-center shadow-sm">
        <h1 className="font-heading text-xl font-bold text-neutral-900">
          {t("title")}
        </h1>
        <p className="mt-3 text-sm text-neutral-600">
          {t.rich("instructions", {
            envExample: () => (
              <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.example</code>
            ),
            envLocal: () => (
              <code className="rounded bg-white px-1.5 py-0.5 text-xs">.env.local</code>
            ),
            supabaseUrl: () => (
              <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_URL</code>
            ),
            supabaseAnonKey: () => (
              <code className="rounded bg-white px-1.5 py-0.5 text-xs">NEXT_PUBLIC_SUPABASE_ANON_KEY</code>
            ),
          })}
        </p>
        {isDev ? (
          <Button
            type="button"
            className="mt-6 w-full"
            onClick={() => router.push(continueHref)}
          >
            {t("continueDev")}
          </Button>
        ) : (
          <Button type="button" className="mt-6 w-full" asChild>
            <Link href="/">{t("backToHome")}</Link>
          </Button>
        )}
      </div>
    </div>
  );
}
