"use client";

import React, { useState, useCallback, useMemo } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { OrdersOverview, columns } from "./columns";
import { OrdersTable } from "./OrdersTable";
import PaginationWithLinks from "@/components/ui/pagination-with-links";
import { EntityDetailSheet } from "@/components/dashboard/data-view/EntityDetailSheet";
import { MetricPill } from "@/components/dashboard/shared/MetricPill";
import { ShoppingBag, Clock, CheckCircle2, Search, FileX } from "lucide-react";
import { Input } from "@/components/ui/input";
import { EmptyState } from "@/components/dashboard/shared/EmptyState";

export default function OrdersOverviewClient({
  initialData = { documents: [], total: 0 },
}: {
  initialData?: { documents: OrdersOverview[]; total: number };
}) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  const [selectedOrder, setSelectedOrder] = useState<OrdersOverview | null>(
    null
  );
  const [sheetOpen, setSheetOpen] = useState(false);

  const activePage = Number(searchParams.get("page") ?? 1);
  const pageSize = Number(searchParams.get("pageSize") ?? 10);

  const { orders, pendingCount, completedCount } = useMemo(() => ({
    orders: initialData.documents,
    pendingCount: initialData.documents.filter(o => o.order_status === "pending").length,
    completedCount: initialData.documents.filter(o => o.order_status === "completed" || o.order_status === "delivered").length
  }), [initialData.documents]);

  const handleRowClick = useCallback((order: OrdersOverview) => {
    setSelectedOrder(order);
    setSheetOpen(true);
  }, []);

  const emptyState = useMemo(() => (
    <EmptyState 
      icon={FileX}
      title="Keine Bestellungen gefunden"
      description="Es wurden noch keine Bestellungen in Ihrem Shop aufgegeben oder Ihre Suchfilter liefern keine Ergebnisse."
    />
  ), []);

  return (
    <div className="space-y-6">
      {/* Quick Stats */}
      <div className="flex flex-wrap gap-3">
        <MetricPill 
          label="Total Orders" 
          value={initialData.total} 
          icon={<ShoppingBag className="size-3.5 shrink-0" />} 
          variant="default" 
        />
        <MetricPill 
          label="Pending" 
          value={pendingCount} 
          icon={<Clock className="size-3.5 shrink-0" />} 
          variant="warning" 
        />
        <MetricPill 
          label="Completed" 
          value={completedCount} 
          icon={<CheckCircle2 className="size-3.5 shrink-0" />} 
          variant="success" 
        />
      </div>

      <div className="flex flex-col gap-4">
        {/* Toolbar */}
        <div className="flex flex-wrap items-center justify-between gap-4 py-1">
          <div className="flex flex-1 items-center gap-2 max-w-sm">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
              <Input 
                placeholder="Bestellungen durchsuchen..." 
                className="pl-9 rounded-md border-border h-9 text-sm"
              />
            </div>
          </div>
        </div>

        {/* Table Container */}
        <div className="rounded-md border bg-card overflow-hidden">
          <OrdersTable
            columns={columns}
            data={orders}
            onRowClick={handleRowClick}
            emptyState={emptyState}
          />
        </div>

        {/* Pagination */}
        <div className="py-2 border-t">
          <PaginationWithLinks
            page={activePage}
            pageSize={pageSize}
            totalCount={initialData.total}
            pageSizeSelectOptions={{ pageSizeOptions: [10, 20, 50] }}
          />
        </div>
      </div>

      <EntityDetailSheet
        open={sheetOpen}
        onOpenChange={setSheetOpen}
        data={selectedOrder}
        type="order"
      />
    </div>
  );
}