import { db } from "@/lib/db";
import { requireConfAccess } from "@/lib/rbac";
import { Card, EmptyState, PageHeader, StatusBadge, btn, input } from "@/components/ui";
import { fmtDate } from "@/lib/utils";
import { assignReviewer, decideSubmission } from "../actions";

export const metadata = { title: "Submissions" };

export default async function SubmissionsPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { id } = await params;
  const { error } = await searchParams;
  await requireConfAccess(id, "submissions.manage");
  const subs = await db.submission.findMany({
    where: { conferenceId: id, status: { not: "DRAFT" } },
    orderBy: { createdAt: "desc" },
    include: { user: true, reviews: { include: { reviewer: true } } },
  });
  const conf = await db.conference.findUnique({ where: { id }, select: { cfpOpen: true, cfpDeadline: true } });

  const pipeline = ["SUBMITTED", "UNDER_REVIEW", "REVISION_REQUIRED", "ACCEPTED", "REJECTED", "SCHEDULED"];
  const counts = Object.fromEntries(pipeline.map((s) => [s, subs.filter((x) => x.status === s).length]));

  return (
    <main>
      <PageHeader
        title="Call for Papers"
        sub={conf?.cfpOpen ? `CFP is OPEN${conf.cfpDeadline ? ` · deadline ${fmtDate(conf.cfpDeadline)}` : ""} — researchers submit via the attendee portal.` : "CFP is closed — open it in Settings."}
      />
      {error && <div className="mb-4 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600">{error}</div>}

      <div className="mb-6 flex flex-wrap gap-2 text-xs">
        {pipeline.map((s) => (
          <div key={s} className="flex items-center gap-1.5 rounded-lg border border-zinc-800 px-3 py-1.5">
            <StatusBadge status={s} />
            <span className="font-semibold tabular-nums text-zinc-300">{counts[s]}</span>
          </div>
        ))}
      </div>

      <div className="space-y-3">
        {subs.length === 0 && <EmptyState title="No submissions yet" body="Once the CFP is open, submissions appear here for review and decisions." />}
        {subs.map((s) => {
          const scored = s.reviews.filter((r) => r.score != null);
          const avg = scored.length ? (scored.reduce((sum, r) => sum + (r.score ?? 0), 0) / scored.length).toFixed(1) : null;
          return (
            <Card key={s.id} className="p-4">
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-zinc-100">{s.title}</span>
                    <StatusBadge status={s.status} />
                  </div>
                  <div className="mt-0.5 text-xs text-zinc-500">
                    {s.category} · {s.user.name} ({s.user.email}){s.coAuthors ? ` + ${s.coAuthors}` : ""} · {fmtDate(s.createdAt)}
                    {s.keywords && <> · <span className="text-zinc-600">{s.keywords}</span></>}
                  </div>
                  <p className="mt-2 line-clamp-2 max-w-3xl text-sm text-zinc-400">{s.abstract}</p>
                </div>
                {avg && (
                  <div className="rounded-lg border border-zinc-800 px-3 py-1.5 text-center">
                    <div className="text-lg font-bold text-zinc-100">{avg}</div>
                    <div className="text-[10px] uppercase text-zinc-500">avg score</div>
                  </div>
                )}
              </div>

              {s.reviews.length > 0 && (
                <div className="mt-3 space-y-1.5 border-t border-zinc-800/70 pt-3">
                  {s.reviews.map((r) => (
                    <div key={r.id} className="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
                      <span className="font-medium text-zinc-400">{r.reviewer.name}</span>
                      {r.status === "COMPLETED" ? (
                        <>
                          <span className="text-zinc-300">score {r.score}/10</span>
                          {r.recommendation && <StatusBadge status={r.recommendation === "ACCEPT" || r.recommendation === "WEAK_ACCEPT" ? "ACCEPTED" : "REJECTED"} />}
                          {r.comments && <span className="italic">“{r.comments}”</span>}
                        </>
                      ) : (
                        <span className="text-amber-600/90">review pending</span>
                      )}
                    </div>
                  ))}
                </div>
              )}

              <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-zinc-800/70 pt-3">
                <form action={assignReviewer.bind(null, id)} className="flex gap-2">
                  <input type="hidden" name="submissionId" value={s.id} />
                  <input name="email" type="email" placeholder="Reviewer email" className={`${input} w-52 py-1.5 text-xs`} required />
                  <button className={btn.smSecondary}>Assign reviewer</button>
                </form>
                <div className="ml-auto flex gap-1.5">
                  {["ACCEPTED", "REVISION_REQUIRED", "REJECTED"].map((st) => (
                    <form key={st} action={decideSubmission.bind(null, id, s.id, st)}>
                      <button className={st === "ACCEPTED" ? btn.sm : btn.smSecondary}>
                        {st === "ACCEPTED" ? "Accept" : st === "REJECTED" ? "Reject" : "Request revision"}
                      </button>
                    </form>
                  ))}
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </main>
  );
}