"use client";

import { Suspense, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  Search,
  Eye,
  Check,
  X,
  PackageCheck,
  ImageOff,
  Phone,
  CreditCard,
  Hash,
  CalendarClock,
  Trash2,
  AlertCircle,
} from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { Avatar } from "@/components/ui/Avatar";
import { NetworkBadge } from "@/components/NetworkBadge";
import { Drawer } from "@/components/ui/Drawer";
import { Button } from "@/components/ui/Button";
import { Pagination } from "@/components/ui/Pagination";
import { EmptyState } from "@/components/ui/EmptyState";
import { Skeleton } from "@/components/ui/Skeleton";
import { formatCurrency, formatDateTime } from "@/lib/mock-data";
import { useAdminOrders } from "@/lib/data/admin-orders-provider";
import { AdminOrder } from "@/lib/data/orders";
import { OrderStatusDb } from "@/lib/supabase/types";
import { NetworkId } from "@/lib/types";
import { cn } from "@/lib/cn";

const TABS: { id: OrderStatusDb | "all"; label: string }[] = [
  { id: "all", label: "All" },
  { id: "pending", label: "Pending" },
  { id: "approved", label: "Approved" },
  { id: "completed", label: "Completed" },
  { id: "rejected", label: "Rejected" },
];
const PAGE_SIZE = 8;

function OrdersContent() {
  const searchParams = useSearchParams();
  const initialStatus = (searchParams.get("status") as OrderStatusDb | null) ?? "all";
  const { orders, loading, error, approveOrder, rejectOrder, completeOrder, removeOrder } =
    useAdminOrders();

  const [tab, setTab] = useState<OrderStatusDb | "all">(initialStatus);
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [confirmingDelete, setConfirmingDelete] = useState(false);

  // Always resolve the selected order from the live list, so the drawer
  // reflects a status change or realtime update immediately.
  const selected = orders.find((o) => o.dbId === selectedId) ?? null;

  useEffect(() => {
    setActionError(null);
    setConfirmingDelete(false);
    setScreenshotUrl(selected?.screenshotPath ?? null);
  }, [selected?.dbId, selected?.screenshotPath]);

  const rows = useMemo(() => {
    return orders
      .filter((o) => tab === "all" || o.status === tab)
      .filter((o) => {
        if (!query.trim()) return true;
        const q = query.toLowerCase();
        return (
          o.id.toLowerCase().includes(q) ||
          o.phone.toLowerCase().includes(q) ||
          o.customerName.toLowerCase().includes(q)
        );
      });
  }, [orders, tab, query]);

  const totalPages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
  const pageRows = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  async function handleAction(action: () => Promise<void>) {
    setSubmitting(true);
    setActionError(null);
    try {
      await action();
    } catch (err) {
      setActionError(err instanceof Error ? err.message : "That didn't work — try again.");
    } finally {
      setSubmitting(false);
    }
  }

  async function handleDelete() {
    if (!selected) return;
    if (!confirmingDelete) {
      setConfirmingDelete(true);
      return;
    }
    setSubmitting(true);
    setActionError(null);
    try {
      await removeOrder(selected);
      setSelectedId(null);
    } catch (err) {
      setActionError(err instanceof Error ? err.message : "Couldn't delete this order.");
      setConfirmingDelete(false);
    } finally {
      setSubmitting(false);
    }
  }

  const canDelete = selected && (selected.status === "pending" || selected.status === "rejected");

  return (
    <div>
      <PageHeader title="Orders" subtitle="Review, verify and manage every order — updates live" />

      {error && (
        <div className="mb-4 flex items-center gap-2 rounded-xl bg-danger/10 px-4 py-3 text-sm text-danger">
          <AlertCircle size={16} /> {error}
        </div>
      )}

      <div className="panel">
        <div className="flex flex-col gap-3 border-b border-black/[0.06] p-4 dark:border-white/[0.06] sm:flex-row sm:items-center sm:justify-between">
          <div className="no-scrollbar flex gap-1.5 overflow-x-auto">
            {TABS.map((t) => {
              const count = t.id === "all" ? orders.length : orders.filter((o) => o.status === t.id).length;
              return (
                <button
                  key={t.id}
                  onClick={() => {
                    setTab(t.id);
                    setPage(1);
                  }}
                  className={cn(
                    "shrink-0 rounded-xl px-3.5 py-2 text-sm font-medium transition-colors",
                    tab === t.id
                      ? "bg-gold text-ink font-semibold"
                      : "text-muted hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
                  )}
                >
                  {t.label} <span className="tnum opacity-70">({count})</span>
                </button>
              );
            })}
          </div>
          <div className="flex items-center gap-2 rounded-xl border border-black/[0.08] px-3 py-2 dark:border-white/[0.08] sm:w-64">
            <Search size={15} className="text-muted" />
            <input
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                setPage(1);
              }}
              placeholder="Search orders…"
              className="w-full bg-transparent text-sm outline-none placeholder:text-muted"
            />
          </div>
        </div>

        {loading ? (
          <div className="flex flex-col gap-2 p-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-14 w-full" />
            ))}
          </div>
        ) : pageRows.length === 0 ? (
          <EmptyState icon={Search} title="No orders found" description="Try a different filter or search term." />
        ) : (
          <div className="thin-scrollbar overflow-x-auto">
            <table className="w-full min-w-[760px] text-left text-sm">
              <thead>
                <tr className="border-b border-black/[0.06] text-[11px] uppercase tracking-wide text-muted dark:border-white/[0.06]">
                  <th className="px-5 py-3 font-medium">Order</th>
                  <th className="px-5 py-3 font-medium">Customer</th>
                  <th className="px-5 py-3 font-medium">Package</th>
                  <th className="px-5 py-3 font-medium">Amount</th>
                  <th className="px-5 py-3 font-medium">Date</th>
                  <th className="px-5 py-3 font-medium">Status</th>
                  <th className="px-5 py-3 font-medium text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                {pageRows.map((o) => (
                  <tr
                    key={o.dbId}
                    className="cursor-pointer border-b border-black/[0.04] transition-colors last:border-0 hover:bg-black/[0.015] dark:border-white/[0.04] dark:hover:bg-white/[0.02]"
                    onClick={() => setSelectedId(o.dbId)}
                  >
                    <td className="px-5 py-3.5 tnum text-[13px] font-semibold">{o.id}</td>
                    <td className="px-5 py-3.5">
                      <div className="flex items-center gap-2.5">
                        <Avatar name={o.customerName} size="sm" />
                        <div className="min-w-0">
                          <p className="truncate text-[13px] font-medium">{o.customerName}</p>
                          <p className="truncate text-[11px] text-muted">{o.phone}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-5 py-3.5">
                      <div className="flex items-center gap-2">
                        <NetworkBadge network={o.network as NetworkId} size="sm" />
                        <span className="text-[13px] text-muted">{o.packageName}</span>
                      </div>
                    </td>
                    <td className="px-5 py-3.5 tnum text-[13px] font-semibold">
                      {formatCurrency(o.amount)}
                    </td>
                    <td className="px-5 py-3.5 text-[13px] text-muted">{formatDateTime(o.createdAt)}</td>
                    <td className="px-5 py-3.5">
                      <StatusBadge status={o.status} compact />
                    </td>
                    <td className="px-5 py-3.5 text-right">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelectedId(o.dbId);
                        }}
                        className="inline-flex h-8 w-8 items-center justify-center rounded-lg hover:bg-black/5 dark:hover:bg-white/5"
                      >
                        <Eye size={15} className="text-muted" />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        <Pagination
          page={page}
          totalPages={totalPages}
          onChange={setPage}
          totalItems={rows.length}
          pageSize={PAGE_SIZE}
        />
      </div>

      <Drawer
        open={!!selected}
        onClose={() => setSelectedId(null)}
        title={selected?.id ?? ""}
        subtitle={selected?.customerName}
        footer={
          selected && (
            <div className="flex flex-col gap-2">
              {selected.status === "pending" && (
                <div className="flex gap-2">
                  <Button
                    variant="secondary"
                    fullWidth
                    disabled={submitting}
                    className="!bg-danger/10 !text-danger"
                    onClick={() => handleAction(() => rejectOrder(selected))}
                  >
                    <X size={15} /> Reject
                  </Button>
                  <Button fullWidth disabled={submitting} onClick={() => handleAction(() => approveOrder(selected))}>
                    <Check size={15} /> Approve
                  </Button>
                </div>
              )}
              {canDelete && (
                <Button
                  variant={confirmingDelete ? "danger" : "ghost"}
                  fullWidth
                  disabled={submitting}
                  onClick={handleDelete}
                >
                  <Trash2 size={15} />
                  {confirmingDelete ? "Tap again to confirm delete" : "Delete Order"}
                </Button>
              )}
            </div>
          )
        }
      >
        {selected && (
          <div className="flex flex-col gap-5">
            <div className="flex items-center justify-between">
              <StatusBadge status={selected.status} />
              {selected.status === "approved" && (
                <Button size="sm" disabled={submitting} onClick={() => handleAction(() => completeOrder(selected))}>
                  <PackageCheck size={14} /> Mark Completed
                </Button>
              )}
            </div>

            {actionError && (
              <div className="flex items-start gap-2 rounded-xl bg-danger/10 px-3.5 py-3 text-sm text-danger">
                <AlertCircle size={16} className="mt-0.5 shrink-0" /> {actionError}
              </div>
            )}

            <div className="panel flex items-center gap-3 !shadow-none p-3.5">
              <NetworkBadge network={selected.network as NetworkId} size="md" />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold">{selected.packageName}</p>
              </div>
              <p className="tnum text-sm font-semibold">{formatCurrency(selected.amount)}</p>
            </div>

            <div>
              <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">Customer</p>
              <div className="flex items-center gap-3">
                <Avatar name={selected.customerName} />
                <div>
                  <p className="text-sm font-medium">{selected.customerName}</p>
                </div>
              </div>
            </div>

            <div className="flex flex-col gap-3 rounded-2xl border border-black/[0.06] p-4 dark:border-white/[0.06]">
              <Row icon={Phone} label="Phone Number" value={selected.phone} />
              <Row icon={CreditCard} label="Payment Method" value={selected.paymentMethodLabel ?? "—"} />
              <Row icon={Hash} label="Transaction ID" value={selected.referenceNumber ?? "—"} mono />
              <Row icon={CalendarClock} label="Order Date & Time" value={formatDateTime(selected.createdAt)} />
            </div>

            <div>
              <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
                Payment Screenshot
              </p>
              {screenshotUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={screenshotUrl}
                  alt="Payment screenshot"
                  className="w-full rounded-2xl border border-black/[0.06] object-cover dark:border-white/[0.06]"
                />
              ) : (
                <div className="flex h-40 flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-black/[0.12] text-muted dark:border-white/[0.12]">
                  <ImageOff size={22} />
                  <p className="text-xs">
                    {selected.screenshotPath ? "Loading screenshot…" : "No screenshot on this order"}
                  </p>
                </div>
              )}
            </div>
          </div>
        )}
      </Drawer>
    </div>
  );
}

function Row({
  icon: Icon,
  label,
  value,
  mono,
}: {
  icon: typeof Phone;
  label: string;
  value: string;
  mono?: boolean;
}) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="flex items-center gap-2 text-xs text-muted">
        <Icon size={14} /> {label}
      </div>
      <span className={cn("text-right text-sm font-medium", mono && "tnum font-mono")}>{value}</span>
    </div>
  );
}

export default function OrdersPage() {
  return (
    <Suspense fallback={null}>
      <OrdersContent />
    </Suspense>
  );
}