"use client";

import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { usePublicSession } from "@/components/shop/public-session-context";
import { useAuthModal } from "@/components/shop/auth-modal-context";
import DataService from "@/config/axios";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type TrackedOrder = {
  _id: string;
  orderNumber: string;
  status: string;
  paymentStatus?: string;
  trackingNumber?: string;
  trackingNote?: string;
  grandTotal: number;
  createdAt?: string;
};

export default function AccountTrackPage() {
  const { isAuthenticated, loading } = usePublicSession();
  const { openAuthModal } = useAuthModal();
  const [orderNumber, setOrderNumber] = useState("");
  const [busy, setBusy] = useState(false);
  const [order, setOrder] = useState<TrackedOrder | null>(null);

  const track = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isAuthenticated) {
      openAuthModal("login");
      return;
    }
    const num = orderNumber.trim().toUpperCase();
    if (!num) {
      toast.error("Enter your order number");
      return;
    }
    setBusy(true);
    setOrder(null);
    try {
      const res = await DataService.get(`/user/shop/orders/by-number/${encodeURIComponent(num)}`);
      setOrder(res.data?.data || null);
    } catch (err: unknown) {
      toast.error(getApiErrorMessage(err, "Order not found"));
    } finally {
      setBusy(false);
    }
  };

  if (loading) return <p className="text-gray-500">Loading…</p>;

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">Track order</h1>
      <p className="mt-1 text-gray-600">Enter your order number (e.g. ON-000001).</p>

      {!isAuthenticated ? (
        <div className="mt-6">
          <p className="text-gray-600">Sign in to track your orders.</p>
          <Button className="mt-4" type="button" onClick={() => openAuthModal("login")}>
            Log in
          </Button>
        </div>
      ) : (
        <>
          <form onSubmit={track} className="mt-6 flex max-w-md flex-col gap-3 sm:flex-row sm:items-end">
            <div className="grid flex-1 gap-2">
              <Label htmlFor="orderNumber">Order number</Label>
              <Input
                id="orderNumber"
                value={orderNumber}
                onChange={(e) => setOrderNumber(e.target.value)}
                placeholder="N00001319"
              />
            </div>
            <Button type="submit" disabled={busy}>
              {busy ? "Searching…" : "Track"}
            </Button>
          </form>

          {order ? (
            <div className="mt-6 max-w-lg rounded-lg border bg-white p-4">
              <p className="font-semibold text-slate-900">{order.orderNumber}</p>
              <p className="mt-1 text-sm capitalize text-gray-600">
                Status: {order.status} · Payment: {(order.paymentStatus || "unpaid").replace(/_/g, " ")}
              </p>
              {order.trackingNumber ? (
                <p className="mt-2 text-sm">Tracking: {order.trackingNumber}</p>
              ) : null}
              {order.trackingNote ? <p className="text-sm text-gray-600">{order.trackingNote}</p> : null}
              <p className="mt-2 text-sm">Total: {Number(order.grandTotal).toFixed(2)}</p>
              <Button asChild className="mt-4" size="sm" variant="outline">
                <Link href={`/account/orders/${order._id}`}>View full details</Link>
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}