import { Card } from "@/components/ui/card";
import { requireAdmin } from "@/lib/auth";
import { UploadClient } from "@/app/(app)/upload/upload-client";
import { getRegionMembers } from "@/lib/regions";
import { release } from "@/lib/release";
import { notFound } from "next/navigation";

export default async function UploadPage({
  searchParams,
}: {
  searchParams: Promise<{ scope?: string }>;
}) {
  if (!release.importsEnabled) {
    notFound();
  }

  const viewer = await requireAdmin();
  const params = await searchParams;
  const requestedScope = (params.scope ?? "").trim().toUpperCase();
  const selectedScopeCountries =
    viewer.role === "admin" ? getRegionMembers(requestedScope) : [];
  const selectedScope = selectedScopeCountries.length > 0 ? requestedScope : "";

  return (
    <>
      <Card className="bg-[linear-gradient(120deg,#ffffff_0%,#f4f9ff_62%,#fff4e9_100%)]">
        <p className="caption text-xs uppercase tracking-[0.2em] text-[#2663AC]">VEEVA Data Ingest</p>
        <h2 className="mt-2 text-3xl font-black tracking-tight text-slate-900">Import Otsuka VAE Data</h2>
        <p className="mt-2 text-sm text-slate-600">
          Upload an Excel workbook or CSV, preview normalized rows, then commit merge updates into
          canonical VEEVA email events keyed by <code>Sent Email Name</code>.
        </p>
        <div className="mt-4 grid gap-2.5 md:grid-cols-3">
          {[
            "Auto-detects Excel and CSV files.",
            "Flags rows outside the chosen dashboard scope.",
            "Previews normalized rows before any write happens.",
          ].map((item) => (
            <div
              key={item}
              className="rounded-2xl border border-[#d9e6f4] bg-white/88 px-3 py-3 text-sm text-slate-700 shadow-[0_14px_24px_-26px_rgba(38,99,172,0.9)]"
            >
              {item}
            </div>
          ))}
        </div>
      </Card>

      <UploadClient
        role={viewer.role}
        allowedCountries={viewer.allowedCountries}
        selectedScope={selectedScope}
        selectedScopeCountries={selectedScopeCountries}
      />
    </>
  );
}