"use client";

import {
  BadgeIndianRupee,
  Bell,
  Box,
  ChevronDown,
  CircleUserRound,
  Clock3,
  ExternalLink,
  PackageCheck,
  Search,
  Store,
  TrendingUp,
  Truck,
  Users,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTenant } from "@/components/tenant-provider";

type AdminOrder = {
  id: number;
  orderNumber: string;
  trackingId: string;
  customerName: string;
  city: string;
  total: string;
  status: string;
  paymentMethod: string;
  paymentStatus: string;
  createdAt: string;
  items: Array<{ id: number; title: string; image: string; quantity: number }>;
};

type Affiliate = {
  id: number;
  companyName: string;
  contactName: string;
  email: string;
  audience: string;
  status: string;
  referralCode: string;
  createdAt: string;
};

const statusOptions = [
  ["confirmed", "Confirmed"],
  ["packed", "Packed"],
  ["shipped", "Shipped"],
  ["out_for_delivery", "Out for delivery"],
  ["delivered", "Delivered"],
  ["cancelled", "Cancelled"],
];

const statusStyles: Record<string, string> = {
  confirmed: "bg-blue-50 text-blue-700",
  packed: "bg-violet-50 text-violet-700",
  shipped: "bg-cyan-50 text-cyan-700",
  out_for_delivery: "bg-orange-50 text-orange-700",
  delivered: "bg-green-50 text-green-700",
  cancelled: "bg-red-50 text-red-700",
};

export default function AdminDashboard() {
  const { tenant, formatMoney } = useTenant();
  const [orders, setOrders] = useState<AdminOrder[]>([]);
  const [affiliates, setAffiliates] = useState<Affiliate[]>([]);
  const [loading, setLoading] = useState(true);
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState("all");
  const [updating, setUpdating] = useState<string | null>(null);
  const [toast, setToast] = useState("");

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [ordersResponse, affiliateResponse] = await Promise.all([
        fetch("/api/orders"),
        fetch("/api/affiliates"),
      ]);
      const ordersData = (await ordersResponse.json()) as { orders?: AdminOrder[] };
      const affiliateData = (await affiliateResponse.json()) as { affiliates?: Affiliate[] };
      setOrders(ordersData.orders ?? []);
      setAffiliates(affiliateData.affiliates ?? []);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadData();
  }, [loadData]);

  useEffect(() => {
    if (!toast) return;
    const timer = window.setTimeout(() => setToast(""), 2400);
    return () => window.clearTimeout(timer);
  }, [toast]);

  async function updateStatus(order: AdminOrder, status: string) {
    setUpdating(order.trackingId);
    try {
      const response = await fetch(`/api/orders/${order.trackingId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status, location: `${tenant.brandName} Operations Centre`, note: `Status updated by the ${tenant.brandName} operations team.` }),
      });
      if (!response.ok) throw new Error();
      setOrders((current) => current.map((item) => item.id === order.id ? { ...item, status } : item));
      setToast(`${order.orderNumber} updated successfully`);
    } catch {
      setToast("Status update failed. Please try again.");
    } finally {
      setUpdating(null);
    }
  }

  const visibleOrders = useMemo(() => {
    const term = query.toLowerCase();
    return orders.filter((order) => {
      const matchesFilter = filter === "all" || order.status === filter;
      const matchesQuery = !term || order.orderNumber.toLowerCase().includes(term) || order.customerName.toLowerCase().includes(term) || order.trackingId.toLowerCase().includes(term);
      return matchesFilter && matchesQuery;
    });
  }, [orders, filter, query]);

  const revenue = orders.filter((order) => order.status !== "cancelled").reduce((sum, order) => sum + Number(order.total), 0);
  const openOrders = orders.filter((order) => !["delivered", "cancelled"].includes(order.status)).length;
  const delivered = orders.filter((order) => order.status === "delivered").length;

  return (
    <main className="min-h-[calc(100vh-72px)] bg-[#f4f7fb] px-4 py-7 sm:px-7">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div><p className="text-xs font-black uppercase tracking-[0.15em] text-[#155ee9]">Operations workspace</p><h1 className="mt-1 text-2xl font-black tracking-[-0.03em] sm:text-3xl">Good morning, Admin</h1><p className="mt-1 text-xs text-slate-500">Here&apos;s what&apos;s happening across {tenant.brandName} today.</p></div>
          <div className="flex items-center gap-2"><button className="relative grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500"><Bell size={18} /><span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" /></button><button className="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-black"><span className="grid h-7 w-7 place-items-center rounded-lg bg-blue-100 text-[#155ee9]"><CircleUserRound size={17} /></span>Admin <ChevronDown size={13} /></button></div>
        </div>

        <section className="mt-7 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[
            [BadgeIndianRupee, "Gross revenue", formatMoney(revenue), "+12.4%", "bg-blue-50 text-[#155ee9]"],
            [Box, "Total orders", String(orders.length), `${openOrders} active`, "bg-violet-50 text-violet-600"],
            [PackageCheck, "Delivered", String(delivered), orders.length ? `${Math.round((delivered / orders.length) * 100)}% rate` : "0% rate", "bg-green-50 text-green-600"],
            [Users, "Partner leads", String(affiliates.length), `${affiliates.filter((item) => item.status === "pending").length} pending`, "bg-orange-50 text-orange-600"],
          ].map(([Icon, label, value, change, style]) => { const MetricIcon = Icon as React.ElementType; return <article key={String(label)} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><div className="flex items-start justify-between"><span className={`grid h-10 w-10 place-items-center rounded-xl ${String(style)}`}><MetricIcon size={19} /></span><span className="flex items-center gap-1 text-[10px] font-black text-green-600"><TrendingUp size={12} /> {String(change)}</span></div><p className="mt-4 text-2xl font-black">{String(value)}</p><p className="mt-1 text-xs font-bold text-slate-400">{String(label)}</p></article>; })}
        </section>

        <section className="mt-5 grid gap-5 lg:grid-cols-[1.45fr_0.55fr]">
          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div className="flex items-center justify-between"><div><h2 className="font-black">Sales overview</h2><p className="mt-1 text-[10px] text-slate-400">Order value trend</p></div><select className="rounded-lg border border-slate-200 px-3 py-2 text-[10px] font-bold outline-none"><option>Last 7 days</option><option>This month</option></select></div>
            <div className="mt-7 flex h-36 items-end gap-3 border-b border-slate-100 px-2">{[35, 52, 42, 70, 58, 82, Math.max(25, Math.min(100, 30 + orders.length * 8))].map((height, index) => <div key={index} className="group relative flex h-full flex-1 items-end"><div className="w-full rounded-t-lg bg-[#155ee9] transition group-hover:bg-[#0d4fc8]" style={{ height: `${height}%`, opacity: 0.5 + index * 0.07 }} /></div>)}</div><div className="mt-3 flex justify-between px-2 text-[9px] font-bold text-slate-400">{["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"].map((day) => <span key={day}>{day}</span>)}</div>
          </div>
          <div className="rounded-2xl bg-[#0b2756] p-5 text-white shadow-sm"><div className="flex items-center justify-between"><h2 className="font-black">Fulfilment</h2><Truck size={19} className="text-[#ffd54a]" /></div><div className="mt-6 space-y-4">{[["To pack", orders.filter((o) => o.status === "confirmed").length, "bg-blue-400"], ["In transit", orders.filter((o) => ["packed", "shipped", "out_for_delivery"].includes(o.status)).length, "bg-[#ffd54a]"], ["Delivered", delivered, "bg-green-400"]].map(([label, value, color]) => <div key={String(label)}><div className="mb-2 flex justify-between text-xs font-bold"><span className="text-blue-100">{String(label)}</span><span>{String(value)}</span></div><div className="h-1.5 overflow-hidden rounded-full bg-white/10"><div className={`h-full rounded-full ${String(color)}`} style={{ width: `${orders.length ? Math.max(6, (Number(value) / orders.length) * 100) : 0}%` }} /></div></div>)}</div><a href="/delivery" className="mt-7 flex items-center justify-center gap-2 rounded-xl bg-white/10 px-3 py-3 text-xs font-black hover:bg-white/20">Open delivery console <ExternalLink size={14} /></a></div>
        </section>

        <section className="mt-5 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 p-5"><div><h2 className="font-black">Order management</h2><p className="mt-1 text-[10px] text-slate-400">Update fulfilment and monitor payments</p></div><div className="flex flex-1 flex-wrap justify-end gap-2"><div className="relative min-w-[190px]"><Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search orders" className="h-9 w-full rounded-lg border border-slate-200 pl-9 pr-3 text-xs outline-none focus:border-blue-500" /></div><select value={filter} onChange={(event) => setFilter(event.target.value)} className="h-9 rounded-lg border border-slate-200 px-3 text-xs font-bold outline-none"><option value="all">All status</option>{statusOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></div></div>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[850px] text-left"><thead><tr className="bg-slate-50 text-[9px] font-black uppercase tracking-wider text-slate-400"><th className="px-5 py-3">Order</th><th className="px-4 py-3">Customer</th><th className="px-4 py-3">Items</th><th className="px-4 py-3">Payment</th><th className="px-4 py-3">Total</th><th className="px-4 py-3">Status</th><th className="px-4 py-3">Update</th></tr></thead>
              <tbody className="divide-y divide-slate-100">
                {loading ? <tr><td colSpan={7} className="px-5 py-14 text-center text-sm font-bold text-slate-400">Loading commerce data…</td></tr> : visibleOrders.length === 0 ? <tr><td colSpan={7} className="px-5 py-14 text-center"><Box className="mx-auto text-slate-300" size={32} /><p className="mt-3 text-sm font-black">No orders yet</p><p className="mt-1 text-xs text-slate-400">New customer orders will appear here.</p></td></tr> : visibleOrders.map((order) => <tr key={order.id} className="text-xs hover:bg-slate-50/70"><td className="px-5 py-4"><a href={`/track?id=${order.trackingId}`} className="font-black text-[#155ee9]">{order.orderNumber}</a><p className="mt-1 text-[9px] text-slate-400">{new Date(order.createdAt).toLocaleDateString("en-IN")}</p></td><td className="px-4 py-4"><p className="font-bold">{order.customerName}</p><p className="mt-1 text-[9px] text-slate-400">{order.city}</p></td><td className="px-4 py-4"><div className="flex -space-x-2">{order.items.slice(0, 3).map((item) => <img key={item.id} src={item.image} alt="" title={item.title} className="h-8 w-8 rounded-full border-2 border-white object-cover" />)}{order.items.length > 3 && <span className="grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-slate-100 text-[9px] font-black">+{order.items.length - 3}</span>}</div></td><td className="px-4 py-4"><p className="font-bold uppercase">{order.paymentMethod}</p><p className={`mt-1 text-[9px] font-bold ${order.paymentStatus === "paid" ? "text-green-600" : "text-orange-600"}`}>{order.paymentStatus}</p></td><td className="px-4 py-4 font-black">{formatMoney(Number(order.total))}</td><td className="px-4 py-4"><span className={`rounded-full px-2.5 py-1 text-[9px] font-black capitalize ${statusStyles[order.status]}`}>{order.status.replaceAll("_", " ")}</span></td><td className="px-4 py-4"><select disabled={updating === order.trackingId} value={order.status} onChange={(event) => void updateStatus(order, event.target.value)} className="rounded-lg border border-slate-200 bg-white px-2 py-2 text-[10px] font-bold outline-none disabled:opacity-50">{statusOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></td></tr>)}
              </tbody>
            </table>
          </div>
        </section>

        <section className="mt-5 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><div className="flex items-center justify-between"><div><h2 className="font-black">Affiliate applications</h2><p className="mt-1 text-[10px] text-slate-400">Companies waiting to join the partner network</p></div><a href="/affiliate" className="text-xs font-black text-[#155ee9]">View landing page</a></div><div className="mt-5 grid gap-3 md:grid-cols-2 lg:grid-cols-3">{affiliates.length === 0 ? <div className="col-span-full rounded-xl bg-slate-50 p-7 text-center text-xs font-bold text-slate-400">No affiliate applications yet.</div> : affiliates.slice(0, 6).map((affiliate) => <article key={affiliate.id} className="flex items-start gap-3 rounded-xl border border-slate-100 p-4"><span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-orange-50 text-orange-600"><Store size={18} /></span><div className="min-w-0"><p className="truncate text-xs font-black">{affiliate.companyName}</p><p className="mt-1 truncate text-[10px] text-slate-400">{affiliate.contactName} • {affiliate.audience}</p><div className="mt-2 flex items-center gap-2"><span className="rounded bg-orange-50 px-1.5 py-0.5 text-[8px] font-black uppercase text-orange-600">{affiliate.status}</span><span className="text-[8px] font-bold text-slate-400">{affiliate.referralCode}</span></div></div></article>)}</div></section>
      </div>
      {toast && <div className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl bg-[#101d37] px-5 py-3 text-xs font-bold text-white shadow-2xl">{toast}</div>}
    </main>
  );
}