import Link from "next/link";
import { getClassRequestsByStudentEmail } from "@/lib/classes";

export const dynamic = "force-dynamic";

function normalizeEmail(value: string | string[] | undefined) {
  if (typeof value !== "string") return "";
  return value.trim().toLowerCase();
}

function formatDateTime(value: string) {
  return new Intl.DateTimeFormat("es-AR", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date(value));
}

function formatStatus(value: "NEW" | "CONTACTED" | "CONFIRMED" | "REJECTED" | "EXPIRED") {
  switch (value) {
    case "NEW":
      return "Nueva";
    case "CONTACTED":
      return "Contactada";
    case "CONFIRMED":
      return "Confirmada";
    case "REJECTED":
      return "Rechazada";
    case "EXPIRED":
      return "Expirada";
    default:
      return value;
  }
}

function statusClassName(value: "NEW" | "CONTACTED" | "CONFIRMED" | "REJECTED" | "EXPIRED") {
  if (value === "CONFIRMED") return "border-emerald-400/30 bg-emerald-400/12 text-emerald-100";
  if (value === "REJECTED" || value === "EXPIRED") return "border-rose-400/35 bg-rose-400/12 text-rose-100";
  return "border-white/20 bg-white/8 text-white/85";
}

export default async function ClassesMePage({
  searchParams,
}: {
  searchParams: Promise<{ email?: string | string[] }>;
}) {
  const query = await searchParams;
  const email = normalizeEmail(query.email);
  const items = email ? await getClassRequestsByStudentEmail(email) : [];

  return (
    <main className="mx-auto max-w-6xl px-6 py-10 sm:py-14">
      <Link href="/classes" className="text-sm text-white/60 transition hover:text-[#c4d600]">
        Volver a classes
      </Link>

      <section className="mt-5 rounded-[2rem] border border-white/10 bg-[linear-gradient(180deg,#141813,#0c0f0b)] p-8 shadow-[0_30px_90px_-45px_rgba(196,214,0,0.22)]">
        <p className="text-xs uppercase tracking-[0.24em] text-[#c4d600]">Demo loop</p>
        <h1 className="mt-3 text-3xl font-semibold tracking-tight text-white sm:text-4xl">Mis solicitudes</h1>
        <p className="mt-3 max-w-3xl text-sm leading-6 text-white/70 sm:text-base">
          Vista demo para seguir solicitudes creadas desde `classes`. Todavia no confirma reservas finales en ATC.
        </p>

        <form method="get" className="mt-7 flex flex-col gap-3 sm:flex-row sm:items-end">
          <label className="flex-1 text-sm text-white/80" htmlFor="classes-me-email">
            Email del estudiante
            <input
              id="classes-me-email"
              name="email"
              type="email"
              required
              defaultValue={email}
              placeholder="alumno@demo.com"
              className="mt-2 h-11 w-full rounded-xl border border-white/20 bg-black/35 px-4 text-sm text-white outline-none transition placeholder:text-white/40 focus:border-[#c4d600]/60"
            />
          </label>
          <button
            type="submit"
            className="inline-flex h-11 items-center justify-center rounded-xl border border-[#c4d600]/35 bg-[#c4d600]/12 px-5 text-sm font-medium text-white transition hover:border-[#c4d600]/60 hover:bg-[#c4d600]/18"
          >
            Buscar solicitudes
          </button>
        </form>
      </section>

      {email ? (
        <section className="mt-8 space-y-4">
          {items.length === 0 ? (
            <div className="rounded-2xl border border-white/10 bg-black/20 p-6 text-sm text-white/70">
              No encontramos solicitudes para <span className="font-medium text-white">{email}</span>. Podes crear una desde una oferta en
              {" "}
              <Link href="/classes" className="text-[#c4d600] hover:text-[#d8ef39]">
                /classes
              </Link>
              .
            </div>
          ) : (
            items.map((item) => (
              <article key={item.id} className="rounded-2xl border border-white/10 bg-black/20 p-5">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <p className="text-sm font-medium text-white">{item.classOffer.title}</p>
                  <span className={`rounded-full border px-3 py-1 text-xs uppercase tracking-[0.12em] ${statusClassName(item.status)}`}>
                    {formatStatus(item.status)}
                  </span>
                </div>
                <p className="mt-2 text-sm text-white/65">
                  Coach: {item.classOffer.coachName} · Venue: {item.classOffer.venueName}
                </p>
                <p className="mt-1 text-xs text-white/50">Clase: {formatDateTime(item.classOffer.startsAt)}</p>
                <p className="mt-1 text-xs text-white/50">Solicitud creada: {formatDateTime(item.createdAt)}</p>
                <p className="mt-1 text-xs text-white/50">
                  Modo: {item.selectionMode === "slot" ? "Horario elegido" : "Horario flexible"}
                </p>
              </article>
            ))
          )}
        </section>
      ) : null}
    </main>
  );
}