"use client";
import { useParams } from "next/navigation";
import { useState } from "react";
import CommonError from "@/app/components/CommonError";
import { trackOrder, OrderRow } from "../_lib/storeApiCalls";

export default function TrackOrderPage() {
  const params = useParams<{ orgSlug: string }>();
  const [invoiceNo, setInvoiceNo] = useState("");
  const [email, setEmail] = useState("");
  const [order, setOrder] = useState<OrderRow | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(""); setOrder(null); setLoading(true);
    try {
      const result = await trackOrder(params.orgSlug, invoiceNo.trim(), email.trim());
      setOrder(result);
    } catch {
      setError("We couldn't find an order matching that invoice number and email.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mx-auto" style={{ maxWidth: 560 }}>
      <h3 className="mb-4 text-center">Track Your Order</h3>
      <CommonError message={error} type="error" />

      <form onSubmit={handleSubmit} className="card card-body mb-4">
        <label className="form-label">Invoice Number</label>
        <input className="form-control mb-3" placeholder="e.g. FS1-20260812-0001" value={invoiceNo} onChange={(e) => setInvoiceNo(e.target.value)} required />
        <label className="form-label">Email used at checkout</label>
        <input className="form-control mb-3" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        <button className="btn btn-primary" disabled={loading}>{loading ? "Searching..." : "Track Order"}</button>
      </form>

      {order && (
        <div className="card card-body">
          <h5>Order #{order.invoice_no}</h5>
          <p className="mb-1"><strong>Status:</strong> <span className="text-capitalize">{order.fulfillment_status.replace("_", " ")}</span></p>
          <p className="mb-1"><strong>Delivery:</strong> {order.delivery_method === "delivery" ? "Home Delivery" : "Store Pickup"}</p>
          {order.tracking_number && <p className="mb-1"><strong>Tracking #:</strong> {order.tracking_number}</p>}
          <p className="mb-0"><strong>Total:</strong> {order.grand_total}</p>
        </div>
      )}
    </div>
  );
}