"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import axios from "axios";
import {
  LayoutDashboard, ShoppingBag, ShoppingCart, History,
  Wallet, Settings, LogOut, Package, User, MapPin, Truck,
  CreditCard, TrendingUp, Calendar, Hash, ArrowLeft,
  CheckCircle, Clock, XCircle, AlertCircle, Phone, Mail,
  ChevronRight, Banknote, Star,
} from "lucide-react";

const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000",
  withCredentials: true,
});
api.interceptors.request.use((config) => {
  const token = typeof window !== "undefined" ? localStorage.getItem("reseller_token") : null;
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

const fmt = (n: number) => "৳" + Number(n || 0).toLocaleString("en-BD");

const statusConfig: Record<string, { label: string; color: string; bg: string; icon: any; step: number }> = {
  pending:    { label: "Pending",    color: "text-amber-400",   bg: "bg-amber-400",   icon: Clock,        step: 0 },
  processing: { label: "Processing", color: "text-blue-400",    bg: "bg-blue-400",    icon: AlertCircle,  step: 1 },
  shipped:    { label: "Shipped",    color: "text-indigo-400",  bg: "bg-indigo-400",  icon: Truck,        step: 2 },
  delivered:  { label: "Delivered",  color: "text-emerald-400", bg: "bg-emerald-400", icon: CheckCircle,  step: 3 },
  cancelled:  { label: "Cancelled",  color: "text-red-400",     bg: "bg-red-400",     icon: XCircle,      step: -1 },
};

const navItems = [
  { id: "dashboard", label: "Dashboard",      icon: LayoutDashboard, href: "/reseller/dashboard" },
  { id: "catalog",   label: "Product Catalog", icon: ShoppingBag,    href: "/reseller/dashboard?tab=catalog" },
  { id: "checkout",  label: "Place Order",     icon: ShoppingCart,   href: "/reseller/dashboard?tab=checkout" },
  { id: "orders",    label: "Order History",   icon: History,        href: "/reseller/dashboard?tab=orders" },
  { id: "wallet",    label: "Wallet & Cashout",icon: Wallet,         href: "/reseller/dashboard?tab=wallet" },
  { id: "settings",  label: "Payment Settings",icon: Settings,       href: "/reseller/dashboard?tab=settings" },
];

const steps = ["Pending", "Processing", "Shipped", "Delivered"];

export default function ResellerOrderDetailPage() {
  const { orderNumber } = useParams<{ orderNumber: string }>();
  const router = useRouter();
  const [order, setOrder]   = useState<any>(null);
  const [user, setUser]     = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]   = useState("");

  useEffect(() => {
    api.get("/api/reseller/stats").then(r => { if (r.data.success) setUser(r.data.data?.user); }).catch(() => {});
    if (!orderNumber) return;
    api.get(`/api/reseller/orders/${orderNumber}`)
      .then(r => { if (r.data.success) setOrder(r.data.data); else setError("Order not found."); })
      .catch(() => setError("Failed to load order details."))
      .finally(() => setLoading(false));
  }, [orderNumber]);

  const logout = () => { localStorage.removeItem("reseller_token"); router.push("/reseller/login"); };

  const sc = order ? (statusConfig[order.status] ?? statusConfig["pending"]) : null;
  const currentStep = sc?.step ?? 0;
  const profit = order ? (order.total_reseller_profit ?? (order.subtotal - order.total_reseller_price)) : 0;

  return (
    <div className="flex h-screen bg-[#070d1a] overflow-hidden font-sans">

      {/* ══════════════════ SIDEBAR ══════════════════ */}
      <aside className="w-[240px] shrink-0 flex flex-col bg-[#0c1425] border-r border-white/5">
        {/* Brand */}
        <div className="px-5 pt-6 pb-5 flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-900/40">
            <ShoppingBag size={17} className="text-white" />
          </div>
          <div>
            <p className="font-black text-white text-sm tracking-tight">Sawdabazar</p>
            <p className="text-[10px] text-emerald-400 font-bold uppercase tracking-[0.15em]">Reseller</p>
          </div>
        </div>

        <div className="mx-3 h-px bg-white/5 mb-3" />

        {/* Nav */}
        <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto">
          {navItems.map(item => {
            const active = item.id === "orders";
            return (
          <Link
                  key={item.id}
                  href={item.href}
                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-all group ${
                    active
                      ? "bg-emerald-500/15 text-emerald-400 font-semibold"
                      : "text-slate-500 hover:text-slate-200 hover:bg-white/5"
                  }`}>
                  <item.icon size={16} className={active ? "text-emerald-400" : "text-slate-600 group-hover:text-slate-300"} />
                  {item.label}
                  {active && <ChevronRight size={13} className="ml-auto text-emerald-500/60" />}
                </Link>
            );
          })}
        </nav>

        {/* User card */}
        <div className="p-3 mt-auto">
          <div className="rounded-xl bg-white/[0.04] border border-white/5 p-3 flex items-center gap-3 mb-1">
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-emerald-400 font-bold text-xs shrink-0">
              {user?.name?.charAt(0)?.toUpperCase() ?? "R"}
            </div>
            <div className="overflow-hidden flex-1 min-w-0">
              <p className="text-white text-xs font-semibold truncate">{user?.name ?? "Reseller"}</p>
              <p className="text-slate-500 text-[10px] truncate">{user?.email ?? ""}</p>
            </div>
          </div>
          <button onClick={logout} className="w-full flex items-center gap-2.5 px-3 py-2 text-slate-600 hover:text-red-400 hover:bg-red-500/8 rounded-lg transition-all text-xs">
            <LogOut size={14} /> Sign Out
          </button>
        </div>
      </aside>

      {/* ══════════════════ MAIN ══════════════════ */}
      <main className="flex-1 overflow-y-auto">

        {/* ── Topbar ── */}
        <div className="sticky top-0 z-20 bg-[#070d1a]/90 backdrop-blur-xl border-b border-white/5 px-7 py-3.5 flex items-center gap-4">
          <button onClick={() => router.back()}
            className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all border border-white/5">
            <ArrowLeft size={16} />
          </button>
          <div>
            <p className="text-xs text-slate-500 leading-none mb-1">Order Details</p>
            <p className="font-bold text-white text-sm font-mono tracking-wide">{orderNumber}</p>
          </div>
          {sc && (
            <div className={`ml-auto flex items-center gap-2 px-3.5 py-1.5 rounded-full border text-xs font-semibold ${
              sc.label === "Delivered" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-300" :
              sc.label === "Pending"   ? "border-amber-500/30 bg-amber-500/10 text-amber-300" :
              sc.label === "Shipped"   ? "border-indigo-500/30 bg-indigo-500/10 text-indigo-300" :
              sc.label === "Cancelled" ? "border-red-500/30 bg-red-500/10 text-red-300" :
                                         "border-blue-500/30 bg-blue-500/10 text-blue-300"
            }`}>
              <sc.icon size={12} />
              {sc.label}
            </div>
          )}
        </div>

        {loading && (
          <div className="flex flex-col items-center justify-center h-96 gap-4">
            <div className="w-10 h-10 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
            <p className="text-slate-500 text-sm">Loading order…</p>
          </div>
        )}

        {!loading && (error || !order) && (
          <div className="flex flex-col items-center justify-center h-96 gap-3">
            <XCircle size={40} className="text-red-400" />
            <p className="text-white font-semibold">Order Not Found</p>
            <p className="text-slate-500 text-sm">{error}</p>
          </div>
        )}

        {!loading && order && (
          <div className="px-7 py-6 max-w-5xl space-y-5">

            {/* ── Hero Profit Banner ── */}
            <div className="relative rounded-2xl overflow-hidden border border-emerald-500/20 bg-gradient-to-br from-emerald-950/60 via-[#0a1f14] to-teal-950/40 p-6">
              <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(16,185,129,0.12),transparent_60%)]" />
              <div className="relative flex items-start justify-between">
                <div>
                  <p className="text-emerald-400/70 text-xs font-semibold uppercase tracking-widest mb-1">Your Profit on This Order</p>
                  <p className="text-5xl font-black text-emerald-400 font-mono tracking-tight">+{fmt(profit)}</p>
                  <p className="text-emerald-500/60 text-xs mt-2">
                    Margin: {order.subtotal > 0 ? ((profit / order.subtotal) * 100).toFixed(1) : 0}% &nbsp;·&nbsp;
                    {order.items?.length} product{order.items?.length !== 1 ? "s" : ""}
                  </p>
                </div>
                <div className="text-right space-y-1">
                  <div className="text-xs text-slate-500">Retail Total</div>
                  <div className="text-2xl font-bold text-white font-mono">{fmt(order.grand_total)}</div>
                </div>
              </div>

              {/* Mini stats row */}
              <div className="relative mt-5 pt-4 border-t border-emerald-500/10 grid grid-cols-3 gap-4">
                {[
                  { label: "Your Cost",     value: fmt(order.total_reseller_price), color: "text-slate-300" },
                  { label: "Shipping",      value: fmt(order.shipping_cost),         color: "text-blue-300" },
                  { label: "Payment",       value: order.payment_method?.toUpperCase(), color: "text-slate-300" },
                ].map(s => (
                  <div key={s.label}>
                    <p className="text-[10px] text-slate-600 uppercase tracking-wider mb-0.5">{s.label}</p>
                    <p className={`text-sm font-bold font-mono ${s.color}`}>{s.value}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* ── Order Status Tracker ── */}
            {order.status !== "cancelled" && (
              <div className="rounded-2xl border border-white/5 bg-[#0c1425] p-5">
                <p className="text-xs text-slate-500 uppercase tracking-widest font-semibold mb-5">Order Progress</p>
                <div className="flex items-center">
                  {steps.map((step, idx) => {
                    const done    = idx <= currentStep;
                    const active  = idx === currentStep;
                    const isLast  = idx === steps.length - 1;
                    return (
                      <div key={step} className="flex items-center flex-1">
                        <div className="flex flex-col items-center">
                          <div className={`w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all ${
                            done
                              ? "border-emerald-500 bg-emerald-500/20"
                              : "border-slate-700 bg-slate-800"
                          }`}>
                            {done
                              ? <CheckCircle size={15} className="text-emerald-400" />
                              : <div className="w-2 h-2 rounded-full bg-slate-600" />
                            }
                          </div>
                          <p className={`text-[10px] font-semibold mt-2 whitespace-nowrap ${done ? "text-emerald-400" : "text-slate-600"}`}>
                            {step}
                          </p>
                        </div>
                        {!isLast && (
                          <div className={`h-0.5 flex-1 mx-2 rounded transition-all ${
                            idx < currentStep ? "bg-emerald-500/50" : "bg-slate-800"
                          }`} />
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* ── Info Cards Row ── */}
            <div className="grid md:grid-cols-2 gap-4">

              {/* Customer */}
              <div className="rounded-2xl border border-white/5 bg-[#0c1425] p-5">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-7 h-7 rounded-lg bg-violet-500/15 flex items-center justify-center">
                    <User size={13} className="text-violet-400" />
                  </div>
                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Customer</p>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500/20 to-purple-600/20 flex items-center justify-center text-violet-300 font-bold text-sm border border-violet-500/20">
                      {order.customer_name?.charAt(0)?.toUpperCase()}
                    </div>
                    <div>
                      <p className="text-white font-bold text-sm">{order.customer_name}</p>
                      <p className="text-slate-500 text-xs">Customer</p>
                    </div>
                  </div>
                  {order.customer_phone && (
                    <div className="flex items-center gap-2.5 text-sm text-slate-300">
                      <Phone size={13} className="text-slate-600" />
                      <span className="font-mono">{order.customer_phone}</span>
                    </div>
                  )}
                  {order.customer_email && (
                    <div className="flex items-center gap-2.5 text-sm text-slate-300">
                      <Mail size={13} className="text-slate-600" />
                      <span className="truncate">{order.customer_email}</span>
                    </div>
                  )}
                </div>
              </div>

              {/* Shipping */}
              <div className="rounded-2xl border border-white/5 bg-[#0c1425] p-5">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-7 h-7 rounded-lg bg-blue-500/15 flex items-center justify-center">
                    <MapPin size={13} className="text-blue-400" />
                  </div>
                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Delivery Address</p>
                </div>
                <p className="text-slate-200 text-sm leading-relaxed mb-4">{order.shipping_address || "—"}</p>
                <div className="flex gap-4 pt-3 border-t border-white/5">
                  <div>
                    <p className="text-[10px] text-slate-600 uppercase mb-0.5">Method</p>
                    <div className="flex items-center gap-1.5">
                      <Truck size={12} className="text-blue-400" />
                      <p className="text-slate-300 text-xs font-semibold">{order.shipping_method || "Standard"}</p>
                    </div>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-600 uppercase mb-0.5">Ordered On</p>
                    <div className="flex items-center gap-1.5">
                      <Calendar size={12} className="text-slate-500" />
                      <p className="text-slate-300 text-xs font-semibold">
                        {order.created_at ? new Date(order.created_at).toLocaleDateString("en-BD", { month: "short", day: "numeric", year: "numeric" }) : "—"}
                      </p>
                    </div>
                  </div>
                  {order.notes && (
                    <div className="flex-1 min-w-0">
                      <p className="text-[10px] text-slate-600 uppercase mb-0.5">Note</p>
                      <p className="text-slate-400 text-xs italic truncate">"{order.notes}"</p>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* ── Order Items ── */}
            <div className="rounded-2xl border border-white/5 bg-[#0c1425] overflow-hidden">
              {/* Header */}
              <div className="flex items-center justify-between px-5 py-4 border-b border-white/5">
                <div className="flex items-center gap-2">
                  <div className="w-7 h-7 rounded-lg bg-amber-500/15 flex items-center justify-center">
                    <ShoppingBag size={13} className="text-amber-400" />
                  </div>
                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Order Items</p>
                </div>
                <span className="text-xs text-slate-600 bg-slate-800 px-2.5 py-1 rounded-full">
                  {order.items?.length} item{order.items?.length !== 1 ? "s" : ""}
                </span>
              </div>

              {/* Column labels */}
              <div className="grid grid-cols-12 px-5 py-2.5 text-[10px] font-bold text-slate-600 uppercase tracking-widest border-b border-white/[0.04] bg-black/20">
                <div className="col-span-5">Product</div>
                <div className="col-span-1 text-center">Qty</div>
                <div className="col-span-2 text-right">Wholesale</div>
                <div className="col-span-2 text-right">Retail</div>
                <div className="col-span-2 text-right">Profit</div>
              </div>

              {/* Items */}
              <div className="divide-y divide-white/[0.04]">
                {order.items?.map((item: any, idx: number) => {
                  const itemProfit = (item.price - item.reseller_price) * item.quantity;
                  return (
                    <div key={idx} className="grid grid-cols-12 items-center px-5 py-4 hover:bg-white/[0.02] transition-colors group">
                      {/* Product */}
                      <div className="col-span-5 flex items-center gap-3">
                        {item.image ? (
                          <img src={item.image} alt={item.product_name}
                            className="w-12 h-12 rounded-xl object-cover border border-white/5 shrink-0 group-hover:border-white/10 transition-all" />
                        ) : (
                          <div className="w-12 h-12 rounded-xl bg-slate-800 flex items-center justify-center shrink-0 border border-white/5">
                            <Package size={18} className="text-slate-600" />
                          </div>
                        )}
                        <div className="min-w-0">
                          <p className="text-white text-sm font-semibold leading-snug line-clamp-1">{item.product_name}</p>
                          <p className="text-slate-600 text-[10px] font-mono mt-0.5">{item.product_sku}</p>
                        </div>
                      </div>

                      {/* Qty */}
                      <div className="col-span-1 flex justify-center">
                        <span className="w-7 h-7 rounded-lg bg-slate-800 border border-white/5 text-slate-200 text-xs font-bold flex items-center justify-center">
                          {item.quantity}
                        </span>
                      </div>

                      {/* Wholesale */}
                      <div className="col-span-2 text-right">
                        <p className="text-slate-500 text-sm font-mono">{fmt(item.reseller_price)}</p>
                        <p className="text-slate-700 text-[10px]">per item</p>
                      </div>

                      {/* Retail */}
                      <div className="col-span-2 text-right">
                        <p className="text-white text-sm font-mono font-semibold">{fmt(item.price)}</p>
                        <p className="text-slate-600 text-[10px]">× {item.quantity} = {fmt(item.total)}</p>
                      </div>

                      {/* Profit */}
                      <div className="col-span-2 text-right">
                        <span className="inline-flex items-center gap-1 text-sm font-bold font-mono text-emerald-400">
                          <TrendingUp size={11} />
                          +{fmt(itemProfit)}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Totals */}
              <div className="border-t border-white/5 bg-black/30 px-5 py-4 space-y-2">
                <div className="flex justify-between text-xs text-slate-500">
                  <span>Subtotal ({order.items?.length} items)</span>
                  <span className="font-mono text-slate-300">{fmt(order.subtotal)}</span>
                </div>
                <div className="flex justify-between text-xs text-slate-500">
                  <span className="flex items-center gap-1"><Truck size={10} /> Shipping</span>
                  <span className="font-mono text-slate-300">{fmt(order.shipping_cost)}</span>
                </div>
                <div className="flex justify-between items-center text-sm font-bold border-t border-white/5 pt-3 mt-1">
                  <span className="text-slate-300">Grand Total</span>
                  <span className="font-mono text-white text-base">{fmt(order.grand_total)}</span>
                </div>
                <div className="flex justify-between items-center text-sm font-bold pt-0.5">
                  <span className="text-emerald-400 flex items-center gap-1.5"><Star size={13} fill="currentColor" /> Your Profit</span>
                  <span className="font-mono text-emerald-400 text-base">+{fmt(profit)}</span>
                </div>
              </div>
            </div>

            {/* ── Order Meta Chips ── */}
            <div className="rounded-2xl border border-white/5 bg-[#0c1425] p-5">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-7 h-7 rounded-lg bg-slate-700/50 flex items-center justify-center">
                  <Hash size={13} className="text-slate-400" />
                </div>
                <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Order Information</p>
              </div>
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {[
                  { label: "Order Number",   value: order.order_number,  mono: true,  accent: "text-emerald-400" },
                  { label: "Order Status",   value: sc?.label ?? "—",    mono: false, accent: sc?.color },
                  { label: "Payment Method", value: order.payment_method?.toUpperCase(), mono: true, accent: "text-slate-200" },
                  { label: "Payment Status", value: order.payment_status?.toUpperCase(), mono: false, accent: order.payment_status === "paid" ? "text-emerald-400" : "text-amber-400" },
                  { label: "Shipping",       value: order.shipping_method || "Standard", mono: false, accent: "text-slate-200" },
                  { label: "Placed",         value: order.created_at ? new Date(order.created_at).toLocaleString("en-BD", { dateStyle: "medium", timeStyle: "short" }) : "—", mono: false, accent: "text-slate-300" },
                ].map(chip => (
                  <div key={chip.label} className="rounded-xl bg-white/[0.03] border border-white/5 px-4 py-3">
                    <p className="text-[10px] text-slate-600 uppercase tracking-wider mb-1">{chip.label}</p>
                    <p className={`text-sm font-semibold ${chip.accent} ${chip.mono ? "font-mono" : ""} truncate`}>{chip.value}</p>
                  </div>
                ))}
              </div>
            </div>

          </div>
        )}
      </main>
    </div>
  );
}