"use client";
import { useParams, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import Link from "next/link";
import { trackOrder, fetchMyOrders, OrderRow } from "../../_lib/storeApiCalls";
import { useCustomerAuth } from "../../_lib/useCustomerAuth";

export default function OrderConfirmationPage() {
  const params = useParams<{ orgSlug: string; invoiceNo: string }>();
  const searchParams = useSearchParams();
  const email = searchParams.get("email") ?? "";
  const { isLoggedIn, loading: authLoading } = useCustomerAuth(params.orgSlug);
  const [order, setOrder] = useState<OrderRow | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (authLoading) return;

    const resolve = async () => {
      // Logged-in shoppers viewing their own order history need no email —
      // look it up among their own orders instead of the guest-tracking path.
      if (isLoggedIn) {
        try {
          const mine = await fetchMyOrders(params.orgSlug);
          const match = mine.find((o) => o.invoice_no === params.invoiceNo);
          if (match) { setOrder(match); setLoading(false); return; }
        } catch { /* fall through to guest lookup */ }
      }
      if (email) {
        try {
          const result = await trackOrder(params.orgSlug, params.invoiceNo, email);
          setOrder(result);
        } catch { setOrder(null); }
      }
      setLoading(false);
    };
    resolve();
  }, [params.orgSlug, params.invoiceNo, email, isLoggedIn, authLoading]);

  if (loading || authLoading) return <div className="text-center py-9"><div className="spinner-border text-primary" /></div>;

  return (
    <div className="text-center py-4">
      <span className="fa-solid fa-circle-check fs-1 text-success mb-3 d-block" />
      <h3>Thank you! Your order is confirmed.</h3>
      <p className="text-body-tertiary">Invoice #{params.invoiceNo}</p>

      {!order && (
        <p className="text-body-tertiary small">
          Order details aren&apos;t available on this device.{" "}
          <Link href={`/${params.orgSlug}/track`}>Track it here</Link> with your order email.
        </p>
      )}

      {order && (
        <div className="card text-start mx-auto mt-4" style={{ maxWidth: 560 }}>
          <div className="card-body">
            <table className="table table-sm mb-3">
              <tbody>
                {order.items.map((i) => (
                  <tr key={i.id}><td>{i.product_name_snapshot} × {i.quantity}</td><td className="text-end">{i.line_total}</td></tr>
                ))}
              </tbody>
            </table>
            <div className="d-flex justify-content-between fw-bold fs-5"><span>Total</span><span>{order.grand_total}</span></div>
            <hr />
            <p className="mb-1"><strong>Delivery:</strong> {order.delivery_method === "delivery" ? "Home Delivery" : "Store Pickup"}</p>
            <p className="mb-1"><strong>Status:</strong> <span className="text-capitalize">{order.fulfillment_status.replace("_", " ")}</span></p>
            {order.tracking_number && <p className="mb-0"><strong>Tracking #:</strong> {order.tracking_number}</p>}
          </div>
        </div>
      )}

      <div className="mt-4">
        <Link href={`/${params.orgSlug}`} className="btn btn-primary">Continue Shopping</Link>
      </div>
    </div>
  );
}