"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { PageShell } from "@/components/layout/PageShell";
import { Reveal } from "@/components/motion/Reveal";
import { Button } from "@/components/ui/Button";
import { useAuth } from "@/context/auth-context";
import type { Order } from "@/data/types";
import { formatPrice } from "@/lib/format";

export default function AccountPage() {
  const { user, loading, logout } = useAuth();
  const router = useRouter();
  const [orders, setOrders] = useState<Order[]>([]);

  useEffect(() => {
    if (!loading && !user) router.replace("/login");
  }, [user, loading, router]);

  useEffect(() => {
    if (!user) return;
    if (user.role === "admin") {
      router.replace("/admin");
      return;
    }
    void fetch("/api/orders", { credentials: "include" })
      .then((res) => res.json())
      .then((data: { orders?: Order[] }) => setOrders(data.orders ?? []))
      .catch(() => setOrders([]));
  }, [user, router]);

  if (loading || !user) {
    return (
      <div className="flex min-h-[40vh] items-center justify-center text-sm text-muted">
        Loading account…
      </div>
    );
  }

  const recent = orders.slice(0, 3);

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "Account" }]}
      eyebrow="Customer dashboard"
      title={`Welcome, ${user.name}`}
      description={user.email}
      actions={
        <Button
          variant="secondary"
          onClick={async () => {
            await logout();
            router.push("/login");
          }}
        >
          Sign out
        </Button>
      }
    >
      <div className="grid gap-4 sm:grid-cols-3">
        {[
          {
            href: "/account/orders",
            label: "Order history",
            desc: "Track past purchases",
          },
          { href: "/wishlist", label: "Wishlist", desc: "Saved products" },
          { href: "/cart", label: "Cart", desc: "Ready to checkout" },
        ].map((card, index) => (
          <Reveal key={card.href} delay={index * 0.04}>
            <Link
              href={card.href}
              className="block rounded-[1.25rem] border border-border bg-card p-5 transition duration-300 hover:-translate-y-0.5 hover:border-foreground/25"
            >
              <p className="font-medium tracking-tight">{card.label}</p>
              <p className="mt-1 text-sm text-muted">{card.desc}</p>
            </Link>
          </Reveal>
        ))}
      </div>

      <Reveal className="mt-12">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-xl font-semibold tracking-tight">Recent orders</h2>
          <Link href="/account/orders" className="text-sm underline underline-offset-4">
            View all
          </Link>
        </div>
        {recent.length === 0 ? (
          <p className="rounded-2xl border border-dashed border-border bg-card px-4 py-8 text-center text-sm text-muted">
            No orders yet.{" "}
            <Link href="/shop" className="underline underline-offset-4">
              Start shopping
            </Link>
          </p>
        ) : (
          <ul className="space-y-3">
            {recent.map((order) => (
              <li
                key={order.id}
                className="flex flex-wrap items-center justify-between gap-3 rounded-[1.15rem] border border-border bg-card p-4 text-sm"
              >
                <div>
                  <p className="font-medium">{order.id}</p>
                  <p className="capitalize text-muted">{order.status}</p>
                </div>
                <p className="font-semibold tabular-nums">
                  {formatPrice(order.total)}
                </p>
              </li>
            ))}
          </ul>
        )}
      </Reveal>
    </PageShell>
  );
}