import type { Metadata } from "next";
import { redirect } from "next/navigation";
import Link from "next/link";
import { Reveal } from "../../components/Reveal";
import { Footer } from "../../components/Footer";
import { formatPrice, formatDate } from "../../lib/format";
import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
import { OrderStatusBadge } from "../components/OrderStatusBadge";
import { LogoutButton } from "../components/LogoutButton";

// robots: noindex — account area, same reasoning as /checkout.
export const metadata: Metadata = {
  title: "Meine Bestellungen",
  description: "Deine Bestellhistorie bei einfach produktiv.",
  robots: {
    index: false,
    follow: true,
  },
};

export default async function KontoBestellungenPage() {
  const session = await getSessionCustomer();
  if (!session) redirect("/konto/login");

  const orders = await getCustomerOrders(session.token, session.customer.id);

  return (
    <>
      <main className="flex flex-col flex-1 bg-bg-base">
        <Reveal className="flex flex-col gap-6 items-start pt-10 pb-16 px-[var(--layout-padding-x)] w-full max-w-[56rem] mx-auto">
          <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Meine Bestellungen
          </p>
          <p className="text-body text-text-muted">
            Eingeloggt als {session.customer.email} (Kundennummer {session.customer.customerNumber})
          </p>

          {orders.length === 0 ? (
            <p className="text-body text-text-muted">Du hast noch keine Bestellung aufgegeben.</p>
          ) : (
            <div className="flex flex-col gap-4 w-full">
              {orders.map((order) => (
                <Link
                  key={order.orderNumber}
                  href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
                  className="flex flex-wrap items-center gap-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                >
                  <div className="flex flex-col gap-1">
                    <p className="text-label text-text-muted">Bestellnummer</p>
                    <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
                  </div>
                  <div className="flex flex-col gap-1">
                    <p className="text-label text-text-muted">Datum</p>
                    <p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
                  </div>
                  <div className="flex flex-col gap-1">
                    <p className="text-label text-text-muted">Artikel</p>
                    <p className="text-body-sm text-text-primary">{order.itemCount}</p>
                  </div>
                  <div className="flex flex-col gap-1">
                    <p className="text-label text-text-muted">Status</p>
                    <OrderStatusBadge status={order.status} />
                  </div>
                  <div className="flex flex-col gap-1 ml-auto">
                    <p className="text-label text-text-muted">Gesamtbetrag</p>
                    <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                  </div>
                </Link>
              ))}
            </div>
          )}

          <div className="flex gap-6">
            <Link href="/konto/profil" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
              Profil &amp; Adresse
            </Link>
            <Link href="/shop" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
              Weiter einkaufen
            </Link>
            <LogoutButton />
          </div>
        </Reveal>
      </main>
      <Footer />
    </>
  );
}
