"use client";

import React, { useState, useCallback, useTransition } from "react";
import { useRouter } from "next/navigation";
import PaginationWithLinks from "@/components/ui/pagination-with-links";
import { CustomersOverview, columns } from "./columns";
import { DataTable } from "@/components/ui/data-table";
import { EntityDetailPanel } from "@/components/dashboard/data-view/EntityDetailSheet";
import { MasterDetailLayout } from "@/components/dashboard/data-view/MasterDetailLayout";
import { MetricPill } from "@/components/dashboard/shared/MetricPill";
import { Users, UserCheck, UserPlus, Search, UserX } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/dashboard/shared/EmptyState";
import Link from "next/link";

interface CustomersOverviewClientProps {
  initialData: { documents: CustomersOverview[]; total: number };
  activePage: number;
  pageSize: number;
}

export default function CustomersOverviewClient({
  initialData,
  activePage,
  pageSize,
}: CustomersOverviewClientProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [selectedCustomer, setSelectedCustomer] = useState<CustomersOverview | null>(null);

  const handleRowClick = useCallback((customer: CustomersOverview) => {
    setSelectedCustomer(customer);
  }, []);

  const handleDataChange = useCallback(() => {
    startTransition(() => {
      router.refresh();
    });
  }, [router]);

  const handleCancel = useCallback(() => {
    setSelectedCustomer(null);
  }, []);

  return (
    <div className="space-y-6">
      {/* Quick Stats */}
      <div className="flex flex-wrap gap-3">
        <MetricPill 
          label="Gesamtanzahl Kunden" 
          value={initialData.total} 
          icon={<Users className="size-3.5 shrink-0" />} 
          variant="default" 
        />
        <MetricPill 
          label="Neue Kunden" 
          value={initialData.documents.filter(c => {
            if (!c.createdAt) return false;
            const date = new Date(c.createdAt);
            const now = new Date();
            return date > new Date(now.setDate(now.getDate() - 30));
          }).length} 
          icon={<UserPlus className="size-3.5 shrink-0" />} 
          variant="info" 
          tooltip="Kunden, die sich in den letzten 30 Tagen registriert haben"
        />
      </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="Kunden durchsuchen..." 
                className="pl-9 rounded-md border-border h-9 text-sm"
              />
            </div>
          </div>
          <Link href="/dashboard/customers/create">
            <Button size="sm" className="h-9 rounded-md">
              <UserPlus className="mr-2 size-4" />
              Kunde hinzufügen
            </Button>
          </Link>
        </div>

        <MasterDetailLayout>
          <MasterDetailLayout.Master isPending={isPending}>
            <div className="rounded-md border bg-card overflow-hidden">
              <DataTable
                columns={columns}
                data={initialData.documents}
                onRowClick={handleRowClick}
                emptyState={
                  <EmptyState 
                    icon={UserX}
                    title="Keine Kunden gefunden"
                    description="Ihre Kundendatenbank ist noch leer oder Ihre Suche liefert keine Treffer."
                    actionHref="/dashboard/customers/create"
                    actionLabel="Kunde hinzufügen"
                  />
                }
              />
            </div>

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

          <MasterDetailLayout.Detail>
            <EntityDetailPanel
              data={selectedCustomer}
              type="customer"
              mode="panel"
              onDataChange={handleDataChange}
              onCancel={handleCancel}
            />
          </MasterDetailLayout.Detail>
        </MasterDetailLayout>
      </div>
    </div>
  );
}