"use client";

import { Suspense, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { ReceiptText, ChevronRight } from "lucide-react";
import { NetworkBadge } from "@/components/NetworkBadge";
import { StatusPill } from "@/components/ui/StatusPill";
import { EmptyState } from "@/components/ui/EmptyState";
import { Skeleton } from "@/components/ui/Skeleton";
import { useAuth } from "@/lib/auth/auth-provider";
import { fetchUserOrders } from "@/lib/data/orders";
import { Order, OrderStatus } from "@/lib/types";
import { cn } from "@/lib/cn";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { formatDate } from "@/lib/i18n/format-date";

function OrdersContent() {
  const { user } = useAuth();
  const { t, language } = useTranslation();
  const searchParams = useSearchParams();
  const initialStatus = searchParams.get("status") as OrderStatus | null;
  const [activeFilter, setActiveFilter] = useState<OrderStatus | "all">(initialStatus ?? "all");
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);

  const STATUS_FILTERS: { id: OrderStatus | "all"; label: string }[] = [
    { id: "all", label: t("orders.all") },
    { id: "pending", label: t("orders.pending") },
    { id: "approved", label: t("orders.approved") },
    { id: "completed", label: t("orders.completed") },
    { id: "rejected", label: t("orders.rejected") },
  ];

  useEffect(() => {
    if (!user) return;
    let active = true;
    fetchUserOrders()
      .then((result) => active && setOrders(result))
      .finally(() => active && setLoading(false));
    return () => {
      active = false;
    };
  }, [user]);

  const filtered = useMemo(
    () => orders.filter((o) => activeFilter === "all" || o.status === activeFilter),
    [orders, activeFilter]
  );

  return (
    <div className="flex flex-col gap-5 px-4 pt-safe">
      <header className="pt-2">
        <h1 className="font-display text-xl font-semibold tracking-tight">
          {t("orders.title")}
        </h1>
        <p className="text-sm text-muted">{t("orders.subtitle")}</p>
      </header>

      <div className="no-scrollbar flex gap-2 overflow-x-auto">
        {STATUS_FILTERS.map((f) => (
          <button
            key={f.id}
            onClick={() => setActiveFilter(f.id)}
            className={cn(
              "shrink-0 rounded-full px-4 py-2 text-sm font-medium transition-colors",
              activeFilter === f.id
                ? "bg-gradient-to-br from-gold-bright to-gold-dim text-ink font-semibold shadow-glow-gold"
                : "glass text-muted"
            )}
          >
            {f.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="flex flex-col gap-3">
          <Skeleton className="h-24 w-full !rounded-4xl" />
          <Skeleton className="h-24 w-full !rounded-4xl" />
          <Skeleton className="h-24 w-full !rounded-4xl" />
        </div>
      ) : filtered.length === 0 ? (
        <EmptyState
          icon={ReceiptText}
          title={
            activeFilter === "all"
              ? t("orders.noOrdersYet")
              : t("orders.noFilteredOrders", { status: t(`orders.${activeFilter}`) })
          }
          description={
            activeFilter === "all"
              ? t("orders.noOrdersDesc")
              : t("orders.noFilteredOrdersDesc")
          }
        />
      ) : (
        <div className="flex flex-col gap-3">
          {filtered.map((order) => (
            <Link
              key={order.id}
              href={`/orders/${order.id}`}
              className="flex items-center gap-3 rounded-4xl glass px-4 py-4 active:scale-[0.985] transition-transform"
            >
              <NetworkBadge network={order.network} size="md" />
              <div className="min-w-0 flex-1">
                <h3 className="truncate text-[14px] font-semibold">{order.packageName}</h3>
                <p className="mt-0.5 text-xs text-muted">
                  {order.id} &middot; {formatDate(order.createdAt, language)}
                </p>
                <div className="mt-2">
                  <StatusPill status={order.status} />
                </div>
              </div>
              <ChevronRight size={18} className="shrink-0 text-muted" />
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}

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