"use client";

import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { useLang } from "@/context/LanguageContext";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { Spinner } from "@/components/ui";
import { IncrelogLogo } from "@/components/IncrelogLogo";
import VerifyPanel from "@/components/VerifyHub";
import ErrorBoundary from "@/components/ErrorBoundary";

/* Public verification page (no login): the standalone frame around the
   shared VerifyPanel — third-party QR readers show the code text and their
   users land here to type it into the search bar. */

function PublicVerifyFrame() {
  const { t } = useLang();
  const params = useSearchParams();

  return (
    <div className="ems-auth-wrapper min-vh-100 d-flex align-items-center justify-content-center p-4">
      <div style={{ maxWidth: 560, width: "100%" }}>
        <div className="d-flex justify-content-end mb-2">
          <LanguageSwitcher />
        </div>
        <div className="card" style={{ borderRadius: 14 }}>
          <div className="card-body p-4 p-md-5">
            <div className="text-center mb-4">
              <IncrelogLogo size={52} />
              <h4 className="f-w-800 mt-3 mb-1">{t.verifyPage.title}</h4>
              <p className="text-muted ems-fs-13 mb-0">{t.verifyPage.subtitle}</p>
            </div>
            <ErrorBoundary message={t.verifyPage.errBoundary} retryLabel={t.verifyPage.retryCamera}>
            <VerifyPanel prefill={params.get("code") ?? ""} />
          </ErrorBoundary>
          </div>
        </div>
        <p className="text-center text-muted ems-fs-11 mt-3 mb-0 d-flex align-items-center justify-content-center gap-2">
          <IncrelogLogo size={20} animated={false} />
          <span>{t.landing.poweredBy}</span>
        </p>
      </div>
    </div>
  );
}

export default function VerifyPage() {
  return (
    <Suspense
      fallback={
        <div className="ems-auth-wrapper min-vh-100 d-flex align-items-center justify-content-center">
          <Spinner />
        </div>
      }
    >
      <PublicVerifyFrame />
    </Suspense>
  );
}