"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { useLang } from "@/context/LanguageContext";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { Spinner } from "@/components/ui";
import { IncrelogLogo } from "@/components/IncrelogLogo";
import { formatDate } from "@/lib/utils";

interface VerifyResponse {
  valid: boolean;
  institution?: { name: string };
  student?: {
    roll: string;
    name: string;
    nameBn: string | null;
    className: string | null;
    status: string;
  };
  issued?: { totalObtained: number; grade: string };
  report?: {
    type: "exam-schedule" | "inventory";
    title: string;
    generatedAt: string;
  };
}

function VerifyContent() {
  const { t, locale } = useLang();
  const params = useSearchParams();
  const token = params.get("t") ?? "";
  const [data, setData] = useState<VerifyResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!token) {
      setData({ valid: false });
      setLoading(false);
      return;
    }
    fetch(`/api/public/verify-result?t=${encodeURIComponent(token)}`)
      .then((r) => r.json())
      .then(setData)
      .catch(() => setData({ valid: false }))
      .finally(() => setLoading(false));
  }, [token]);

  return (
    <div className="ems-auth-wrapper min-vh-100 d-flex align-items-center justify-content-center p-4">
      <div className="card" style={{ maxWidth: 460, width: "100%", borderRadius: 14 }}>
        <div className="card-body p-4 p-md-5 text-center">
          <IncrelogLogo size={52} />
          <h4 className="f-w-800 mt-3 mb-1">
            {t.portal.resultsPage.verifyTitle}
          </h4>
          <p className="text-muted ems-fs-13 mb-4">{t.portal.resultsPage.verifySubtitle}</p>
          <p className="ems-fs-12 mb-4">
            <Link href="/verify" className="ems-text-teal f-w-700 text-decoration-none">
              {t.verifyPage.haveCodeLink}
            </Link>
          </p>

          {loading ? (
            <Spinner />
          ) : data?.valid ? (
            <div>
              <div
                className="rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                style={{
                  width: 72, height: 72,
                  background: "rgba(40,167,69,0.12)", color: "#1e7e34", fontSize: 34,
                }}
              >
                ✓
              </div>
              <h5 className="f-w-800 text-success mb-3">{t.portal.resultsPage.verifyValid}</h5>
              {data.report ? (
                /* printable-report QR (exam schedule / inventory) */
                <div
                  className="text-start p-3 rounded mb-0"
                  style={{ background: "rgba(36,105,92,0.07)", fontSize: 13 }}
                >
                  <p className="mb-1">
                    <b>{t.portal.resultsPage.verifyInstitution}:</b> {data.institution?.name}
                  </p>
                  <p className="mb-1">
                    <b>{t.portal.resultsPage.verifyDocument}:</b>{" "}
                    {data.report.type === "inventory"
                      ? t.portal.inventoryPage.printReport
                      : t.portal.examsPage.reportTitle}
                  </p>
                  {data.report.title && (
                    <p className="mb-1">
                      <b>{t.portal.resultsPage.examLabel}:</b> {data.report.title}
                    </p>
                  )}
                  <p className="mb-0">
                    <b>{t.portal.resultsPage.verifyIssued}:</b> {formatDate(data.report.generatedAt, locale)}
                  </p>
                </div>
              ) : (
              <div
                className="text-start p-3 rounded mb-0"
                style={{ background: "rgba(36,105,92,0.07)", fontSize: 13 }}
              >
                <p className="mb-1">
                  <b>{t.portal.resultsPage.verifyInstitution}:</b> {data.institution?.name}
                </p>
                <p className="mb-1">
                  <b>{t.common.name}:</b>{" "}
                  {locale === "bn" && data.student?.nameBn ? data.student.nameBn : data.student?.name}
                  {data.student?.roll ? ` (${data.student.roll})` : ""}
                </p>
                {data.student?.className && (
                  <p className="mb-1">
                    <b>{t.portal.studentsPage.classLabel}:</b> {data.student.className}
                  </p>
                )}
                <p className="mb-1">
                  <b>{t.portal.resultsPage.total}:</b> {data.issued?.totalObtained}
                </p>
                <p className="mb-0">
                  <b>{t.portal.resultsPage.grade}:</b> {data.issued?.grade}
                </p>
              </div>
              )}
            </div>
          ) : (
            <div>
              <div
                className="rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                style={{
                  width: 72, height: 72,
                  background: "rgba(220,53,69,0.12)", color: "#dc3545", fontSize: 34,
                }}
              >
                ✕
              </div>
              <h5 className="f-w-800 text-danger mb-2">{t.portal.resultsPage.verifyInvalid}</h5>
              <p className="text-muted ems-fs-13 mb-0">{t.portal.resultsPage.verifyInvalidNote}</p>
            </div>
          )}
        </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>
  );
}

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