"use client";
import React, { useState, useCallback, useEffect } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { columns } from "./columns";
import { EntityDetailSheet } from "@/components/dashboard/data-view/EntityDetailSheet";
import { MetricPill } from "@/components/dashboard/shared/MetricPill";
import { useDebounce } from "@/hooks/useDebounce";
import {
  ListOrdered,
  Euro,
  Package,
  Barcode,
  Hash,
  Layers,
  SortAsc,
  SortDesc,
  Search,
  Filter,
  Plus,
  Calendar,
  PackageSearch,
} from "lucide-react";
import { EmptyState } from "@/components/dashboard/shared/EmptyState";
import { EntityOverviewHeader } from "@/components/dashboard/EntityOverviewHeader";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { PaginatedDataTable } from "@/components/dashboard/data-view/PaginatedDataTable";

interface OverviewClientProps {
  initialData: any;
  page: number;
  pageSize: number;
  sortBy: string;
  sortOrder: string;
}

const SORT_FIELDS = [
  { label: "Name", value: "title", icon: PackageSearch },
  { label: "Preis", value: "price", icon: Euro },
  { label: "Bestand", value: "stock", icon: Package },
  { label: "SKU", value: "SKU", icon: Hash },
  { label: "EAN", value: "EAN", icon: Barcode },
  { label: "Erstellt", value: "created_at", icon: Calendar },
] as const;

export default function OverviewClient({
  initialData,
  page,
  pageSize,
  sortBy,
  sortOrder,
}: OverviewClientProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  const [selectedProduct, setSelectedProduct] = useState<any | null>(null);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState(
    searchParams.get("query") || "",
  );

  const debouncedSearchQuery = useDebounce(searchQuery, 300);

  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString());
      if (value) {
        params.set(name, value);
      } else {
        params.delete(name);
      }
      return params.toString();
    },
    [searchParams],
  );

  const updateParam = useCallback(
    (key: string, value: string) => {
      router.push(pathname + "?" + createQueryString(key, value));
    },
    [pathname, router, createQueryString],
  );

  // Update URL when debounced query changes
  useEffect(() => {
    const currentQuery = searchParams.get("query") || "";
    if (debouncedSearchQuery !== currentQuery) {
      updateParam("query", debouncedSearchQuery);
    }
  }, [debouncedSearchQuery, searchParams, updateParam]);

  const handleRowClick = useCallback((product: any) => {
    setSelectedProduct(product);
    setSheetOpen(true);
  }, []);

  const toolbar = (
    <div className="flex flex-wrap items-center 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="Produkte durchsuchen (Name, SKU, EAN)..."
            className="pl-9 rounded-md border-border h-9 text-sm"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </div>

      <div className="flex items-center gap-2">
        <Select
          value={sortBy}
          onValueChange={(value) => updateParam("sortBy", value)}
        >
          <SelectTrigger className="h-9 w-[160px] flex items-center gap-2 text-sm rounded-md">
            <SelectValue placeholder="Sortieren" />
          </SelectTrigger>
          <SelectContent>
            {SORT_FIELDS.map((field) => (
              <SelectItem key={field.value} value={field.value}>
                <div className="flex items-center gap-2">
                  <field.icon className="size-3.5 text-muted-foreground" />
                  {field.label}
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select
          value={sortOrder}
          onValueChange={(value) => updateParam("sortOrder", value)}
        >
          <SelectTrigger className="h-9 w-[140px] flex items-center gap-2 text-sm rounded-md">
            <SelectValue placeholder="Richtung" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="ASC">
              <div className="flex items-center gap-2">
                <SortAsc className="size-3.5 text-muted-foreground" />
                Aufsteigend
              </div>
            </SelectItem>
            <SelectItem value="DESC">
              <div className="flex items-center gap-2">
                <SortDesc className="size-3.5 text-muted-foreground" />
                Absteigend
              </div>
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );

  return (
    <div className="space-y-6">
      <EntityOverviewHeader
        title="Produkte"
        description="Verwalten Sie Ihren gesamten Produktkatalog an einem zentralen Ort."
        addHref="/dashboard/products/create"
        addLabel="Produkt hinzufügen"
      />

      {/* Quick Stats */}
      <div className="flex flex-wrap gap-3">
        <MetricPill
          label="Total Products"
          value={initialData.total}
          icon={<Package className="size-3.5 shrink-0" />}
          variant="default"
        />
        <MetricPill
          label="In Stock"
          value={
            initialData.inStockCount ??
            initialData.documents.filter((p: any) => p.inventory > 0).length
          }
          icon={<ListOrdered className="size-3.5 shrink-0" />}
          variant="success"
        />
        <MetricPill
          label="Low Stock"
          value={
            initialData.lowStockCount ??
            initialData.documents.filter(
              (p: any) => p.inventory > 0 && p.inventory < 5,
            ).length
          }
          icon={<Filter className="size-3.5 shrink-0" />}
          variant="warning"
        />
      </div>

      <PaginatedDataTable
        columns={columns}
        data={initialData.documents}
        page={page}
        pageSize={pageSize}
        totalCount={initialData.total}
        onRowClick={handleRowClick}
        toolbar={toolbar}
        emptyState={
          <EmptyState
            icon={PackageSearch}
            title="Keine Produkte gefunden"
            description="Es wurden noch keine Produkte angelegt oder Ihre Filterkriterien liefern keine Treffer."
            actionHref="/dashboard/products/create"
            actionLabel="Produkt hinzufügen"
          />
        }
      />

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