"use client";

import {
  Check,
  Clipboard,
  Clock3,
  MapPin,
  Package,
  PackageCheck,
  Search,
  Truck,
} from "lucide-react";
import { FormEvent, useEffect, useState } from "react";
import { useTenant } from "@/components/tenant-provider";

type TrackedOrder = {
  orderNumber: string;
  trackingId: string;
  customerName: string;
  address: string;
  city: string;
  pincode: string;
  total: string;
  status: string;
  carrier: string;
  estimatedDelivery: string;
  paymentMethod: "card" | "cod";
  items: Array<{ id: number; title: string; image: string; quantity: number; price: string }>;
  events: Array<{ id: number; status: string; label: string; location: string; note: string | null; createdAt: string }>;
};

const steps = [
  { status: "confirmed", label: "Confirmed", icon: Clipboard },
  { status: "packed", label: "Packed", icon: Package },
  { status: "shipped", label: "Shipped", icon: Truck },
  { status: "out_for_delivery", label: "Out for delivery", icon: MapPin },
  { status: "delivered", label: "Delivered", icon: PackageCheck },
];

export default function TrackingClient({ initialId }: { initialId: string }) {
  const { tenant, formatMoney } = useTenant();
  const [trackingId, setTrackingId] = useState(initialId);
  const [order, setOrder] = useState<TrackedOrder | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function lookup(id: string) {
    const cleanId = id.trim().toUpperCase();
    if (!cleanId) return;
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`/api/orders/${encodeURIComponent(cleanId)}`);
      const data = (await response.json()) as { order?: TrackedOrder; error?: string };
      if (!response.ok || !data.order) throw new Error(data.error || "Tracking ID not found");
      setOrder(data.order);
      window.history.replaceState(null, "", `/track?id=${cleanId}`);
    } catch (reason) {
      setOrder(null);
      setError(reason instanceof Error ? reason.message : "Could not find this order.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (initialId) void lookup(initialId);
    // The initial URL value should only trigger one lookup.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialId]);

  function submit(event: FormEvent) {
    event.preventDefault();
    void lookup(trackingId);
  }

  const currentStep = order ? steps.findIndex((step) => step.status === order.status) : -1;
  const progress = currentStep < 0 ? 0 : (currentStep / (steps.length - 1)) * 100;

  return (
    <main className="min-h-[calc(100vh-72px)] bg-[#f4f7fb] px-4 py-9 sm:px-7 sm:py-14">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-1.5 text-[11px] font-black uppercase tracking-[0.14em] text-[#155ee9]"><Truck size={14} /> Live order tracking</span>
          <h1 className="mt-4 text-3xl font-black tracking-[-0.04em] text-[#11203e] sm:text-5xl">Where&apos;s my order?</h1>
          <p className="mt-3 text-sm leading-6 text-slate-500">Enter the tracking ID from your order confirmation to follow every step of your delivery.</p>
          <form onSubmit={submit} className="mt-7 flex rounded-2xl border border-slate-200 bg-white p-2 shadow-[0_15px_40px_rgba(20,46,90,0.1)]">
            <div className="relative flex-1"><Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={19} /><input value={trackingId} onChange={(event) => setTrackingId(event.target.value.toUpperCase())} placeholder="e.g. TRK1A2B3C4D5" className="h-12 w-full rounded-xl pl-10 pr-3 text-sm font-bold uppercase tracking-wide outline-none" aria-label="Tracking ID" /></div>
            <button disabled={loading || !trackingId.trim()} className="rounded-xl bg-[#155ee9] px-5 text-sm font-black text-white disabled:opacity-50 sm:px-8">{loading ? "Finding…" : "Track"}</button>
          </form>
          {error && <p className="mt-3 rounded-xl bg-red-50 px-4 py-3 text-sm font-bold text-red-600">{error}</p>}
        </div>

        {!order && !loading && !error && (
          <div className="mx-auto mt-14 grid max-w-3xl gap-4 sm:grid-cols-3">
            {[["1", "Find your ID", "It starts with TRK in your confirmation."], ["2", "Enter above", "We securely locate your shipment."], ["3", "Follow live", "See every delivery milestone."]].map(([number, title, text]) => <div key={number} className="rounded-2xl border border-slate-200 bg-white p-5 text-center"><span className="mx-auto grid h-9 w-9 place-items-center rounded-full bg-blue-50 text-xs font-black text-[#155ee9]">{number}</span><h2 className="mt-3 text-sm font-black">{title}</h2><p className="mt-1 text-xs leading-5 text-slate-500">{text}</p></div>)}
          </div>
        )}

        {order && (
          <div className="mt-10 grid gap-5 lg:grid-cols-[1.55fr_0.7fr]">
            <div className="space-y-5">
              <section className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-[0_12px_35px_rgba(24,49,83,0.07)]">
                <div className="flex flex-wrap items-center justify-between gap-4 border-b border-slate-100 px-5 py-5 sm:px-7">
                  <div><p className="text-[10px] font-black uppercase tracking-[0.14em] text-slate-400">Tracking ID</p><p className="mt-1 text-lg font-black text-[#155ee9]">{order.trackingId}</p></div>
                  <div className="text-right"><p className="text-[10px] font-black uppercase tracking-[0.14em] text-slate-400">Expected delivery</p><p className="mt-1 text-sm font-black">{new Date(order.estimatedDelivery).toLocaleDateString("en-IN", { weekday: "short", day: "numeric", month: "long" })}</p></div>
                </div>
                <div className="p-5 sm:p-8">
                  <div className="relative flex justify-between">
                    <div className="absolute left-[5%] right-[5%] top-5 h-1 rounded-full bg-slate-100"><div className="h-full rounded-full bg-[#155ee9] transition-all duration-700" style={{ width: `${progress}%` }} /></div>
                    {steps.map((step, index) => {
                      const Icon = step.icon;
                      const complete = index <= currentStep && order.status !== "cancelled";
                      return <div key={step.status} className="relative z-10 flex w-1/5 flex-col items-center text-center"><span className={`grid h-10 w-10 place-items-center rounded-full border-4 border-white shadow ${complete ? "bg-[#155ee9] text-white" : "bg-slate-100 text-slate-400"}`}>{index < currentStep ? <Check size={17} strokeWidth={3} /> : <Icon size={16} />}</span><span className={`mt-2 text-[9px] font-black sm:text-xs ${complete ? "text-[#155ee9]" : "text-slate-400"}`}>{step.label}</span></div>;
                    })}
                  </div>
                  {order.status === "cancelled" && <div className="mt-6 rounded-xl bg-red-50 p-3 text-center text-sm font-bold text-red-600">This order has been cancelled.</div>}
                </div>
              </section>

              <section className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm sm:p-7">
                <h2 className="text-lg font-black">Shipment updates</h2>
                <div className="mt-6 space-y-0">
                  {[...order.events].reverse().map((event, index) => (
                    <div key={event.id} className="relative flex gap-4 pb-7 last:pb-0">
                      {index < order.events.length - 1 && <span className="absolute left-[15px] top-7 h-full w-px bg-slate-200" />}
                      <span className={`relative z-10 mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full ${index === 0 ? "bg-[#155ee9] text-white" : "bg-slate-100 text-slate-500"}`}><Check size={14} /></span>
                      <div className="flex-1"><div className="flex flex-wrap items-start justify-between gap-2"><div><p className="text-sm font-black">{event.label}</p><p className="mt-1 flex items-center gap-1 text-xs text-slate-500"><MapPin size={12} /> {event.location}</p></div><p className="text-[10px] font-semibold text-slate-400">{new Date(event.createdAt).toLocaleString("en-IN", { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" })}</p></div>{event.note && <p className="mt-2 text-xs leading-5 text-slate-500">{event.note}</p>}</div>
                    </div>
                  ))}
                </div>
              </section>
            </div>

            <aside className="space-y-5">
              <section className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <div className="flex items-center justify-between"><h2 className="font-black">Order summary</h2><span className="rounded-full bg-blue-50 px-2 py-1 text-[9px] font-black uppercase text-[#155ee9]">{order.carrier}</span></div>
                <p className="mt-1 text-[10px] text-slate-400">Order {order.orderNumber}</p>
                <div className="mt-5 space-y-4">{order.items.map((item) => <div key={item.id} className="flex gap-3"><img src={item.image} alt="" className="h-16 w-16 rounded-xl bg-slate-100 object-cover" /><div className="min-w-0 flex-1"><p className="line-clamp-2 text-xs font-bold leading-4">{item.title}</p><p className="mt-1 text-[10px] text-slate-400">Qty: {item.quantity}</p><p className="mt-1 text-xs font-black">{formatMoney(Number(item.price) * item.quantity)}</p></div></div>)}</div>
                <div className="mt-5 flex justify-between border-t border-dashed border-slate-200 pt-4 text-sm font-black"><span>Total paid</span><span>{formatMoney(Number(order.total))}</span></div>
              </section>
              <section className="rounded-3xl bg-[#0b2756] p-5 text-white shadow-sm"><div className="flex items-center gap-2"><MapPin size={17} className="text-[#ffd54a]" /><h2 className="font-black">Delivery address</h2></div><p className="mt-4 text-sm font-bold">{order.customerName}</p><p className="mt-1 text-xs leading-5 text-blue-100">{order.address}<br />{order.city} — {order.pincode}</p></section>
              <section className="flex items-start gap-3 rounded-2xl border border-orange-100 bg-orange-50 p-4"><Clock3 className="mt-0.5 shrink-0 text-orange-600" size={18} /><div><p className="text-xs font-black text-orange-900">Need delivery help?</p><p className="mt-1 text-[10px] leading-4 text-orange-700">Call {tenant.phonePrimary} or email {tenant.supportEmail}</p></div></section>
            </aside>
          </div>
        )}
      </div>
    </main>
  );
}