"use client";

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  changeFixPackageStatusAction,
  deleteFixPackageAction,
  getFixPackagesAction,
} from "@/features/packages/actions/fix-packages-actions";
import type { FixPackage } from "@/features/packages/services/fix-packages.service";
import { mapApiFixPackageToFixPackage } from "@/features/packages/types/fix-package-api.types";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";
import { FIX_PACKAGES_ADMIN } from "@/lib/strings";
import { TableSkeleton } from "@/roles/admin/components/table-skeleton";
import { Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { DeleteFixPackageDialog } from "./delete-fix-package-dialog";
import { FixPackagesTable } from "./fix-packages-table";
import { ViewPackageDetailsDialog } from "./view-package-details-dialog";

function FixPackagesPageHeader({
  showAddButton = false,
  onAddNew,
}: {
  showAddButton?: boolean;
  onAddNew?: () => void;
}) {
  return (
    <header className="admin-page-header flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 id="fix-packages-heading" className="admin-page-title">
          {FIX_PACKAGES_ADMIN.PAGE_TITLE}
        </h1>
        <p className="admin-page-description">
          {FIX_PACKAGES_ADMIN.PAGE_DESCRIPTION}
        </p>
      </div>
      {showAddButton ? (
        <Button onClick={onAddNew} className="w-full sm:w-auto">
          <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
          {FIX_PACKAGES_ADMIN.ADD_NEW_PACKAGE}
        </Button>
      ) : null}
    </header>
  );
}

export function FixPackagesClient() {
  const toast = useToastEnhanced();
  const router = useRouter();
  const [currentTab, setCurrentTab] = useState<"active" | "inactive">("active");
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);

  const [packages, setPackages] = useState<FixPackage[]>([]);
  const [deletingPackage, setDeletingPackage] = useState<FixPackage | null>(
    null
  );
  const [viewingPackage, setViewingPackage] = useState<FixPackage | null>(null);
  const [pagination, setPagination] = useState({
    total: 0,
    lastPage: 1,
    currentPage: 1,
    perPage: 10,
  });
  const [tabCounts, setTabCounts] = useState({
    active: 0,
    inactive: 0,
  });

  // Debounce search
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Load packages from API
  const loadPackages = useCallback(async () => {
    setIsLoading(true);
    try {
      const [result, activeResult, inactiveResult] = await Promise.all([
        getFixPackagesAction(searchQuery || undefined, currentPage, currentTab),
        getFixPackagesAction(searchQuery || undefined, 1, "active"),
        getFixPackagesAction(searchQuery || undefined, 1, "inactive"),
      ]);

      if (result.success && result.data) {
        // Map API response to UI FixPackage type
        const mappedPackages = (result.data.data || []).map((pkg) =>
          mapApiFixPackageToFixPackage(pkg)
        );

        setPackages(mappedPackages);
        setPagination({
          total: result.data.total || 0,
          lastPage: result.data.last_page || 1,
          currentPage: result.data.current_page || 1,
          perPage: result.data.per_page || 10,
        });
      } else {
        toast.error({
          title: FIX_PACKAGES_ADMIN.ERROR,
          description: result.error || FIX_PACKAGES_ADMIN.FAILED_TO_LOAD,
        });
      }

      if (activeResult.success && activeResult.data) {
        setTabCounts((prev) => ({
          ...prev,
          active: activeResult.data.total || 0,
        }));
      }

      if (inactiveResult.success && inactiveResult.data) {
        setTabCounts((prev) => ({
          ...prev,
          inactive: inactiveResult.data.total || 0,
        }));
      }
    } catch {
      toast.error({
        title: FIX_PACKAGES_ADMIN.ERROR,
        description: FIX_PACKAGES_ADMIN.UNEXPECTED_ERROR_LOADING,
      });
    } finally {
      setIsLoading(false);
    }
  }, [searchQuery, currentPage, currentTab, toast]);

  // Load packages on mount and when page/search changes
  useEffect(() => {
    // Clear previous timeout
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }

    // Debounce search - wait 500ms after user stops typing
    searchTimeoutRef.current = setTimeout(
      () => {
        loadPackages();
      },
      searchQuery ? 500 : 0
    ); // Immediate load if search is cleared

    // Cleanup
    return () => {
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current);
      }
    };
  }, [currentPage, searchQuery, currentTab, loadPackages]);

  const handleTabChange = (value: string) => {
    setCurrentTab(value as "active" | "inactive");
    setCurrentPage(1); // Reset to first page when switching tabs
  };

  const handleToggleStatus = useCallback(
    async (pkg: FixPackage) => {
      const newStatus = pkg.status === "active" ? "inactive" : "active";
      try {
        const result = await changeFixPackageStatusAction(pkg.id, newStatus);
        if (result.success) {
          toast.success({
            title: FIX_PACKAGES_ADMIN.STATUS_UPDATE,
            description: FIX_PACKAGES_ADMIN.STATUS_UPDATED_SUCCESS,
          });
          await loadPackages();
        } else {
          toast.error({
            title: FIX_PACKAGES_ADMIN.ERROR,
            description:
              result.error || FIX_PACKAGES_ADMIN.FAILED_UPDATE_STATUS,
          });
        }
      } catch {
        toast.error({
          title: FIX_PACKAGES_ADMIN.ERROR,
          description: FIX_PACKAGES_ADMIN.FAILED_UPDATE_STATUS,
        });
      }
    },
    [toast, loadPackages]
  );

  const handleDeletePackage = useCallback(async () => {
    if (!deletingPackage) return;

    try {
      const result = await deleteFixPackageAction(deletingPackage.id);

      if (result.success) {
        toast.success({
          title: FIX_PACKAGES_ADMIN.PACKAGE_DELETED,
          description: `${deletingPackage.name} ${FIX_PACKAGES_ADMIN.PACKAGE_DELETED_DESCRIPTION}`,
        });

        // Reload packages
        await loadPackages();
      } else {
        toast.error({
          title: FIX_PACKAGES_ADMIN.ERROR,
          description: result.error || FIX_PACKAGES_ADMIN.FAILED_TO_DELETE,
        });
      }
    } catch {
      toast.error({
        title: FIX_PACKAGES_ADMIN.ERROR,
        description: FIX_PACKAGES_ADMIN.UNEXPECTED_ERROR_DELETING,
      });
    } finally {
      setDeletingPackage(null);
    }
  }, [deletingPackage, toast, loadPackages]);

  const handleEdit = (pkg: FixPackage) => {
    router.push(`/admin/fix-packages/edit/${pkg.id}`);
  };

  return (
    <section aria-labelledby="fix-packages-heading" className="admin-section">
      <div className="space-y-2">
        <header className="admin-page-header flex flex-col gap-4 !mb-0">
          <FixPackagesPageHeader
            showAddButton
            onAddNew={() => router.push("/admin/fix-packages/add-new")}
          />
        </header>

        {isLoading && packages.length === 0 ? (
          <TableSkeleton
            rows={8}
            columns={7}
            toolbarVariant="search10Page2"
            aria-label={FIX_PACKAGES_ADMIN.LOADING_PACKAGES_ARIA}
          />
        ) : (
          <Tabs
            value={currentTab}
            onValueChange={handleTabChange}
            className="w-full"
          >
            <TabsList className="mb-6 h-auto p-1.5 bg-muted/50 rounded-xl border border-border/50">
              <TabsTrigger
                value="active"
                className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
              >
                {FIX_PACKAGES_ADMIN.TAB_ACTIVE} ({tabCounts.active})
              </TabsTrigger>
              <TabsTrigger
                value="inactive"
                className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
              >
                {FIX_PACKAGES_ADMIN.TAB_INACTIVE} ({tabCounts.inactive})
              </TabsTrigger>
            </TabsList>

            <TabsContent value="active" className="mt-0">
              <FixPackagesTable
                packages={packages}
                searchQuery={searchQuery}
                onSearchChange={(value) => {
                  setSearchQuery(value);
                  setCurrentPage(1);
                }}
                currentPage={pagination.currentPage}
                totalPages={pagination.lastPage}
                totalItems={pagination.total}
                pageSize={pagination.perPage}
                onPageChange={setCurrentPage}
                onView={setViewingPackage}
                onEdit={handleEdit}
                onDelete={setDeletingPackage}
                onToggleStatus={handleToggleStatus}
              />
            </TabsContent>

            <TabsContent value="inactive" className="mt-0">
              <FixPackagesTable
                packages={packages}
                searchQuery={searchQuery}
                onSearchChange={(value) => {
                  setSearchQuery(value);
                  setCurrentPage(1);
                }}
                currentPage={pagination.currentPage}
                totalPages={pagination.lastPage}
                totalItems={pagination.total}
                pageSize={pagination.perPage}
                onPageChange={setCurrentPage}
                onView={setViewingPackage}
                onEdit={handleEdit}
                onDelete={setDeletingPackage}
                onToggleStatus={handleToggleStatus}
              />
            </TabsContent>
          </Tabs>
        )}
      </div>

      <DeleteFixPackageDialog
        package={deletingPackage}
        open={!!deletingPackage}
        onOpenChange={(open) => !open && setDeletingPackage(null)}
        onConfirm={handleDeletePackage}
      />

      <ViewPackageDetailsDialog
        package={viewingPackage}
        open={!!viewingPackage}
        onOpenChange={(open) => !open && setViewingPackage(null)}
      />
    </section>
  );
}