import { getTranslations, setRequestLocale } from "next-intl/server";
import { redirect } from "next/navigation";
import { connectDB } from "@/lib/db";
import { WaitlistEntry } from "@/models/WaitlistEntry";
import { getSessionClientId } from "@/lib/auth";
import { Link } from "@/i18n/navigation";
import { AccountPageHeader } from "@/components/account/AccountPageHeader";
import { ORDER_TAG_COLORS, ORDER_TAG_LABELS, type OrderTag } from "@/lib/orderConstants";

export const dynamic = "force-dynamic";

export default async function AccountConventionsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "conventionWaitlist" });
  const to = await getTranslations({ locale, namespace: "orders" });
  const isEn = locale === "en";

  const clientId = await getSessionClientId();
  if (!clientId) redirect(`/${locale}/login`);

  await connectDB();
  const entries = await WaitlistEntry.find({ clientId })
    .populate("conventionId", "name startDate endDate location image logo")
    .populate("orderId", "shootDate shootEndDate eventLocation characterOrConcept tag shootingType rejected archived")
    .sort({ createdAt: -1 })
    .lean();

  const localeTag = isEn ? "en-GB" : "de-DE";
  const fmtDate = (d: Date) =>
    new Date(d).toLocaleDateString(localeTag, { day: "numeric", month: "long", year: "numeric" });
  const fmtTime = (d: Date) =>
    new Date(d).toLocaleTimeString(localeTag, { hour: "2-digit", minute: "2-digit" });
  // Ältere Warteliste-Aufträge tragen die ganze strukturierte Nachricht als
  // Titel — für die Anzeige nur den Charakter herausziehen.
  const cleanConcept = (s: string) => {
    const m = s.match(/^(?:Charakter\/Idee|Character\/idea)\s*:\s*(.+)$/im);
    return (m?.[1] || s.split("\n")[0] || s).trim();
  };
  // "9.–11. Juli 2027" wenn Start/Ende im selben Monat, sonst voller Bereich.
  const fmtRange = (start: Date, end: Date) => {
    const s = new Date(start);
    const e = new Date(end);
    if (s.toDateString() === e.toDateString()) return fmtDate(s);
    if (s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear()) {
      const monthYear = s.toLocaleDateString(localeTag, { month: "long", year: "numeric" });
      return isEn
        ? `${monthYear.split(" ")[0]} ${s.getDate()}–${e.getDate()}, ${s.getFullYear()}`
        : `${s.getDate()}.–${e.getDate()}. ${monthYear}`;
    }
    return `${fmtDate(s)} – ${fmtDate(e)}`;
  };

  return (
    <div>
      <div className="max-w-3xl">
        <AccountPageHeader eyebrow={t("eyebrow")} title={t("title")} />

        {entries.length === 0 ? (
          <p className="text-sm text-[var(--rk-ink-muted)]">
            {t("empty")}{" "}
            <Link href="/conventions" className="underline hover:text-[var(--rk-ink)]">
              {t("browseLink")}
            </Link>
          </p>
        ) : (
          <div className="flex flex-col gap-6">
            {entries.map((entry) => {
              const convention = entry.conventionId as unknown as {
                _id: string;
                name: string;
                startDate: Date;
                endDate: Date;
                location: string;
                image: string;
                logo: string;
              } | null;
              if (!convention) return null;
              const thumb = convention.image || convention.logo || "";
              const thumbIsPhoto = Boolean(convention.image);
              const rawOrder = entry.orderId as unknown as {
                _id: string;
                shootDate: Date | null;
                shootEndDate: Date | null;
                eventLocation: string;
                characterOrConcept: string;
                tag: string;
                shootingType: string;
                rejected: boolean;
                archived: boolean;
              } | null;
              // Ein abgelehnter/archivierter Auftrag ist kein bestätigter Slot
              // mehr — dann NICHT die "Slot bekommen"-Karte zeigen (und keinen
              // Link auf den toten Auftrag).
              const orderCancelled = Boolean(rawOrder && (rawOrder.rejected || rawOrder.archived));
              const order = rawOrder && !orderCancelled ? rawOrder : null;
              const apptStr = order?.shootDate
                ? `${fmtDate(order.shootDate)} · ${fmtTime(order.shootDate)}${
                    order.shootEndDate ? `–${fmtTime(order.shootEndDate)}` : ""
                  }`
                : "";
              const tagColor = (order && ORDER_TAG_COLORS[order.tag as OrderTag]) || "#38bdf8";
              const tagLabel = order ? ORDER_TAG_LABELS[order.tag as OrderTag] || order.tag : "";

              return (
                <div
                  key={String(entry._id)}
                  className="overflow-hidden rounded-xl border border-white/10 bg-[var(--rk-surface)]"
                >
                  <div className="flex gap-5 p-6">
                    {thumb && (
                      <div className="hidden shrink-0 sm:block">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={thumb}
                          alt=""
                          className={
                            thumbIsPhoto
                              ? "h-24 w-36 rounded-lg border border-white/10 object-cover"
                              : "h-24 w-36 rounded-lg border border-white/10 bg-[var(--rk-bg)] object-contain p-2.5"
                          }
                        />
                      </div>
                    )}
                    <div className="min-w-0 flex-1">
                      <h2 className="text-lg font-medium text-[var(--rk-ink)]">{convention.name}</h2>
                      <p className="mt-1 text-sm text-[var(--rk-ink-muted)]">
                        {fmtRange(convention.startDate, convention.endDate)}
                        {convention.location ? ` · ${convention.location}` : ""}
                      </p>
                      <p className="mt-2 text-[0.7rem] uppercase tracking-[0.16em] text-[var(--rk-ink-muted)]">
                        {t("waitlistLabel")} ·{" "}
                        {order
                          ? t("statusDone")
                          : orderCancelled
                            ? t("statusCancelled")
                            : entry.notified
                              ? t("statusSlotShort")
                              : t("statusWaiting")}
                      </p>

                      {orderCancelled ? (
                        <p className="mt-3 text-sm text-[var(--rk-ink-muted)]">{t("slotCancelledHint")}</p>
                      ) : (
                        !order &&
                        entry.notified && (
                          <p className="mt-3 text-sm text-[var(--rk-ink-muted)]">{t("slotOpenHint")}</p>
                        )
                      )}
                    </div>
                  </div>

                  {order && (
                    <>
                      <div
                        className="px-6 py-4"
                        style={{
                          borderTop: `1px solid ${tagColor}80`,
                          borderBottom: `1px solid ${tagColor}80`,
                          background: `${tagColor}29`,
                        }}
                      >
                        <p className="text-sm text-[var(--rk-ink-muted)]">
                          <span style={{ color: tagColor }}>✓ </span>
                          <span className="font-semibold" style={{ color: tagColor }}>
                            {t("slotConfirmedTitle")}
                          </span>
                          {` — ${t("slotConfirmedBody")}`}
                          {apptStr && (
                            <>
                              {`, ${t("appointmentLabel")}: `}
                              <span className="font-medium" style={{ color: tagColor }}>
                                {apptStr}
                              </span>
                            </>
                          )}
                        </p>
                      </div>
                      <div className="p-6">
                        <p className="text-[0.65rem] uppercase tracking-[0.28em] text-[var(--rk-accent)]">
                          {t("orderEyebrow")}
                        </p>
                        <div className="mt-1.5 flex flex-wrap items-center justify-between gap-3">
                          <p className="text-lg font-medium text-[var(--rk-ink)]">
                            {cleanConcept(order.characterOrConcept)}
                          </p>
                          <span
                            className="shrink-0 rounded-full border px-3 py-1 text-[0.6rem] uppercase tracking-[0.12em]"
                            style={{ borderColor: `${tagColor}66`, color: tagColor }}
                          >
                            {tagLabel}
                          </span>
                        </div>
                        <p className="mt-2 text-sm text-[var(--rk-ink-muted)]">
                          {to(`shootingTypes.${order.shootingType}`)}
                          {` · ${convention.name}`}
                          {order.eventLocation ? ` · ${order.eventLocation}` : ""}
                        </p>
                        {apptStr && (
                          <p className="mt-2 text-sm font-medium" style={{ color: tagColor }}>
                            📅 {apptStr}
                            {isEn ? "" : " Uhr"}
                          </p>
                        )}
                        <Link
                          href={`/account/orders/${order._id}`}
                          className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-[var(--rk-accent)] px-5 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-[#141413] transition-opacity hover:opacity-90"
                        >
                          {t("viewOrder")} <span aria-hidden>→</span>
                        </Link>
                      </div>
                    </>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}