"use client";

import React, { useState } from "react";
import { useCart } from "@/context/CartContext";
import {
  X,
  Search,
  PackageCheck,
  Truck,
  CheckCircle2,
  Clock,
  MapPin,
  Building,
} from "lucide-react";

export const OrderTrackerModal: React.FC = () => {
  const { isTrackerOpen, setIsTrackerOpen } = useCart();
  const [searchRef, setSearchRef] = useState("");
  const [trackedOrder, setTrackedOrder] = useState<any>(null);
  const [isSearching, setIsSearching] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  if (!isTrackerOpen) return null;

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!searchRef.trim()) return;

    setIsSearching(true);
    setErrorMsg("");
    setTrackedOrder(null);

    try {
      const res = await fetch(`/api/orders?id=${encodeURIComponent(searchRef.trim())}`);
      const data = await res.json();

      if (data.order) {
        setTrackedOrder(data);
      } else {
        setErrorMsg("No order found matching that reference number. Try e.g. DS-84920 or test placed order.");
      }
    } catch (err) {
      console.error(err);
      setErrorMsg("Failed to connect to tracking server.");
    } finally {
      setIsSearching(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-3 sm:p-6 animate-fadeIn">
      <div className="relative bg-white rounded-3xl shadow-2xl border border-slate-200 w-full max-w-2xl overflow-hidden my-auto p-5 sm:p-8">
        {/* Close Button */}
        <button
          onClick={() => setIsTrackerOpen(false)}
          className="absolute top-4 right-4 z-20 bg-slate-100 hover:bg-slate-200 text-slate-700 p-2 rounded-full transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="flex items-center gap-3 pb-4 mb-5 border-b border-slate-200">
          <div className="w-10 h-10 rounded-xl bg-blue-900 text-white flex items-center justify-center">
            <PackageCheck className="w-5 h-5" />
          </div>
          <div>
            <h2 className="font-extrabold text-xl text-slate-900">Track Your South Africa Order</h2>
            <p className="text-xs text-slate-500">Enter your order ID (e.g., DS-84920) for live courier status</p>
          </div>
        </div>

        {/* Search Form */}
        <form onSubmit={handleSearch} className="flex gap-2 mb-6">
          <div className="relative flex-1">
            <input
              type="text"
              placeholder="Enter Order Reference (e.g. DS-84920)"
              value={searchRef}
              onChange={(e) => setSearchRef(e.target.value)}
              required
              className="w-full pl-10 pr-3 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs uppercase font-bold focus:bg-white focus:ring-2 focus:ring-blue-900"
            />
            <Search className="absolute left-3.5 top-3 w-4 h-4 text-slate-400" />
          </div>

          <button
            type="submit"
            disabled={isSearching}
            className="px-5 py-2.5 bg-blue-950 hover:bg-slate-900 text-white font-extrabold text-xs rounded-xl shadow-md transition-colors cursor-pointer"
          >
            {isSearching ? "Searching..." : "Track Status"}
          </button>
        </form>

        {errorMsg && (
          <div className="p-4 bg-rose-50 border border-rose-200 text-rose-700 rounded-2xl text-xs text-center font-medium mb-4">
            {errorMsg}
          </div>
        )}

        {/* Results view */}
        {trackedOrder ? (
          <div className="space-y-6">
            <div className="p-4 bg-slate-50 rounded-2xl border border-slate-200 flex justify-between items-center text-xs">
              <div>
                <span className="text-slate-500 font-mono">ORDER ID:</span>
                <span className="font-black text-slate-950 ml-1.5">{trackedOrder.order.id}</span>
              </div>
              <span className="px-3 py-1 bg-blue-100 text-blue-900 font-bold rounded-full text-[11px]">
                Status: {trackedOrder.order.orderStatus}
              </span>
            </div>

            {/* Tracking Progress Timeline */}
            <div className="space-y-4 px-2">
              <div className="flex items-center gap-4">
                <div className="w-8 h-8 rounded-full bg-emerald-600 text-white flex items-center justify-center shrink-0">
                  <CheckCircle2 className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="font-bold text-xs text-slate-900">1. Order Confirmed & Paid</h4>
                  <p className="text-[11px] text-slate-500">Tax invoice generated & stock reserved in warehouse</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="w-8 h-8 rounded-full bg-blue-900 text-white flex items-center justify-center shrink-0">
                  <Building className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="font-bold text-xs text-slate-900">2. Processing at Midrand Hub</h4>
                  <p className="text-[11px] text-slate-500">Picked, quality inspected and packed for dispatch</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="w-8 h-8 rounded-full bg-amber-500 text-slate-950 flex items-center justify-center shrink-0">
                  <Truck className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="font-bold text-xs text-slate-900">3. Handed to Courier Guy / Aramex</h4>
                  <p className="text-[11px] text-slate-500">Waybill scanned & in transit to your suburb</p>
                </div>
              </div>
            </div>

            {/* Order Items summary */}
            <div className="p-4 bg-slate-50 rounded-2xl border border-slate-200">
              <h4 className="font-bold text-slate-900 text-xs mb-2">Order Items ({trackedOrder.items.length})</h4>
              <div className="space-y-2">
                {trackedOrder.items.map((item: any) => (
                  <div key={item.id} className="flex justify-between items-center text-xs">
                    <span className="font-medium text-slate-800">{item.productName} (x{item.quantity})</span>
                    <span className="font-bold text-slate-950">R{(parseFloat(item.price) * item.quantity).toFixed(2)}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ) : (
          <div className="p-8 text-center text-slate-500 text-xs bg-slate-50 rounded-2xl border border-dashed border-slate-200">
            <PackageCheck className="w-10 h-10 text-slate-400 mx-auto mb-2" />
            <p className="font-bold text-slate-700 text-sm">Have an active order?</p>
            <p className="mt-1">Enter your order reference above to check delivery progress across South Africa.</p>
          </div>
        )}
      </div>
    </div>
  );
};