"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { ArrowLeft, Download } from "lucide-react";
import { toast } from "sonner";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useAuth } from "@/context/AuthContext";
import { api, ApiError, mediaOrPlaceholder, type OrderDetailsResponse } from "@/lib/api";
import { downloadOrderPdf } from "@/lib/orderPdf";

const formatPkr = (amount: number) =>
  `Rs ${amount.toLocaleString("en-PK", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

export default function ClientOrderDetailPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const orderId = String(params.id);
  const { user, token, isLoading: authLoading } = useAuth();
  const [order, setOrder] = useState<OrderDetailsResponse | null | undefined>(undefined);

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

  useEffect(() => {
    if (!token || !user) return;
    let cancelled = false;
    setOrder(undefined);
    void api.checkout
      .orderById(orderId, token)
      .then((data) => {
        if (!cancelled) setOrder(data);
      })
      .catch((err) => {
        if (cancelled) return;
        toast.error(err instanceof ApiError ? err.message : "Failed to load order.");
        setOrder(null);
      });
    return () => {
      cancelled = true;
    };
  }, [orderId, token, user]);

  if (authLoading || !user) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <p className="p-10 text-center text-sm text-muted-foreground">Checking login…</p>
      </div>
    );
  }

  if (order === undefined) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <p className="p-10 text-center text-sm text-muted-foreground">Loading order…</p>
      </div>
    );
  }

  if (!order) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="container mx-auto px-4 py-16 text-center">
          <h1 className="text-2xl font-bold">Order not found</h1>
          <Link href="/orders" className="mt-4 inline-block text-primary hover:underline">
            ← Back to my orders
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="container mx-auto px-4 py-10 lg:px-8">
        <div className="mb-8 flex flex-wrap items-center justify-between gap-3">
          <div>
            <Link href="/orders" className="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground">
              <ArrowLeft className="h-3.5 w-3.5" /> My Orders
            </Link>
            <h1 className="mt-3 text-3xl font-bold">Order #{order.id}</h1>
            <p className="mt-1 text-sm text-muted-foreground capitalize">
              Status: {order.status}
              {order.created_at ? ` · ${new Date(order.created_at).toLocaleString()}` : ""}
            </p>
          </div>
          <button
            type="button"
            onClick={() => {
              downloadOrderPdf(order);
              toast.success("PDF downloaded.");
            }}
            className="inline-flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground"
          >
            <Download className="h-4 w-4" />
            Download PDF
          </button>
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.4fr_1fr]">
          <div className="space-y-4">
            {(order.items || []).map((item, idx) => (
              <div
                key={`${item.product_id}-${idx}`}
                className="flex gap-4 rounded-2xl border border-border bg-card p-4 shadow-card"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={mediaOrPlaceholder(item.image)}
                  alt=""
                  className="h-20 w-20 rounded-xl border border-border object-cover"
                />
                <div className="min-w-0 flex-1">
                  <p className="font-semibold">{item.product_name || `Product #${item.product_id}`}</p>
                  <p className="mt-1 text-sm text-muted-foreground">Qty {item.quantity}</p>
                </div>
                <p className="font-bold">{formatPkr(Number(item.subtotal))}</p>
              </div>
            ))}
          </div>

          <aside className="h-fit space-y-4 rounded-2xl border border-border bg-card p-5 shadow-card">
            <div>
              <h2 className="text-sm font-bold">Shipping</h2>
              {order.shipping_address ? (
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {order.shipping_address.first_name} {order.shipping_address.last_name}
                  <br />
                  {order.shipping_address.address}
                  <br />
                  {order.shipping_address.city}
                  <br />
                  {order.shipping_address.phone}
                </p>
              ) : (
                <p className="mt-2 text-sm text-muted-foreground">—</p>
              )}
            </div>
            <div className="border-t border-border pt-4 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Subtotal</span>
                <span>{formatPkr(Number(order.summary?.subtotal || 0))}</span>
              </div>
              <div className="mt-2 flex justify-between">
                <span className="text-muted-foreground">Shipping</span>
                <span>{formatPkr(Number(order.summary?.shipping || 0))}</span>
              </div>
              <div className="mt-3 flex justify-between border-t border-border pt-3 text-base font-bold">
                <span>Total</span>
                <span>{formatPkr(Number(order.summary?.total || 0))}</span>
              </div>
              <p className="mt-3 text-xs uppercase text-muted-foreground">
                Payment: {order.payment_method || "—"}
              </p>
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}