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

export default function MyOrdersPage() {
  const params = useParams<{ orgSlug: string }>();
  const { isLoggedIn, loading: authLoading } = useCustomerAuth(params.orgSlug);
  const [orders, setOrders] = useState<OrderRow[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (authLoading) return;
    if (!isLoggedIn) { setLoading(false); return; }
    fetchMyOrders(params.orgSlug).then(setOrders).catch(() => {}).finally(() => setLoading(false));
  }, [params.orgSlug, isLoggedIn, authLoading]);

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

  if (!isLoggedIn) {
    return (
      <div className="alert alert-subtle-info">
        Please <Link href={`/${params.orgSlug}/account/login`}>sign in</Link> to view your orders.
      </div>
    );
  }

  return (
    <>
      <h3 className="mb-4">My Orders</h3>
      {orders.length === 0 ? (
        <p className="text-body-tertiary">You haven&apos;t placed any orders yet.</p>
      ) : (
        <div className="card">
          <div className="card-body p-0">
            <table className="table mb-0">
              <thead><tr><th>Invoice</th><th>Date</th><th className="text-end">Total</th><th>Status</th><th /></tr></thead>
              <tbody>
                {orders.map((o) => (
                  <tr key={o.id}>
                    <td>{o.invoice_no}</td>
                    <td>{new Date(o.created_at).toLocaleDateString()}</td>
                    <td className="text-end">{o.grand_total}</td>
                    <td><span className="badge badge-phoenix badge-phoenix-info text-capitalize">{o.fulfillment_status.replace("_", " ")}</span></td>
                    <td className="text-end">
                      <Link href={`/${params.orgSlug}/order-confirmation/${o.invoice_no}`} className="btn btn-sm btn-link">View</Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </>
  );
}