import { requireUser } from "@/lib/auth";
import { db } from "@/lib/db";
import { Card, PageHeader, StatusBadge, btn, input, Field } from "@/components/ui";
import { fmtDate } from "@/lib/utils";
import { SUBMISSION_CATEGORIES } from "@/lib/constants";
import { submitPaperAction } from "../actions";

export const metadata = { title: "My submissions" };

export default async function MySubmissionsPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; submitted?: string }>;
}) {
  const user = await requireUser();
  const { error, submitted } = await searchParams;
  const [mine, openCfps] = await Promise.all([
    db.submission.findMany({
      where: { userId: user.id },
      orderBy: { createdAt: "desc" },
      include: { conference: true, reviews: { where: { status: "COMPLETED" } } },
    }),
    db.conference.findMany({
      where: { cfpOpen: true, status: { in: ["PUBLISHED", "LIVE"] } },
      orderBy: { startAt: "asc" },
    }),
  ]);

  return (
    <div>
      <PageHeader title="My submissions" sub="Papers, abstracts, posters, and workshop proposals you've submitted." />
      {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>}
      {submitted && <div className="mb-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600">Submission received! You'll be notified when its status changes.</div>}

      <div className="grid gap-6 lg:grid-cols-2">
        <div className="space-y-3">
          {mine.length === 0 && <p className="text-sm text-zinc-500">No submissions yet.</p>}
          {mine.map((s) => (
            <Card key={s.id} className="p-4">
              <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.conference.name} · {s.category} · submitted {fmtDate(s.createdAt)}
                {s.reviews.length > 0 && ` · ${s.reviews.length} review${s.reviews.length === 1 ? "" : "s"} in`}
              </div>
              <p className="mt-2 line-clamp-2 text-sm text-zinc-400">{s.abstract}</p>
            </Card>
          ))}
        </div>

        <Card className="h-fit p-5">
          <h2 className="text-sm font-semibold text-zinc-200">New submission</h2>
          {openCfps.length === 0 ? (
            <p className="mt-2 text-sm text-zinc-500">No conferences are currently accepting submissions.</p>
          ) : (
            <form action={submitPaperAction} className="mt-4 space-y-3">
              <Field name="conferenceId" title="Conference *">
                <select id="conferenceId" name="conferenceId" className={input} required>
                  {openCfps.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name}{c.cfpDeadline ? ` (deadline ${fmtDate(c.cfpDeadline)})` : ""}
                    </option>
                  ))}
                </select>
              </Field>
              <Field name="title" title="Title *"><input id="title" name="title" required className={input} /></Field>
              <Field name="category" title="Category">
                <select id="category" name="category" className={input} defaultValue="PAPER">
                  {SUBMISSION_CATEGORIES.map((c) => <option key={c} value={c}>{c[0] + c.slice(1).toLowerCase()}</option>)}
                </select>
              </Field>
              <Field name="abstract" title="Abstract * (min 30 chars)">
                <textarea id="abstract" name="abstract" rows={5} required className={input} />
              </Field>
              <Field name="keywords" title="Keywords"><input id="keywords" name="keywords" className={input} placeholder="comma, separated" /></Field>
              <Field name="coAuthors" title="Co-authors"><input id="coAuthors" name="coAuthors" className={input} placeholder="Names, comma separated" /></Field>
              <button className={`${btn.primary} w-full`}>Submit</button>
            </form>
          )}
        </Card>
      </div>
    </div>
  );
}