"use client";

import { Search, ListFilter, Plus, RefreshCw, Download, Settings2, Trash2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/src/elements/ui/button";
import { Input } from "@/src/elements/ui/input";
import { CommonHeaderProps } from "@/src/types/components";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/src/elements/ui/dropdown-menu";
import { useEffect } from "react";
import { useAppDispatch } from "../redux/hooks";
import { setPageTitle } from "../redux/reducers/settingsSlice";
import Can from "../components/shared/Can";

const CommonHeader = ({ title, description, onSearch, searchTerm = "", searchPlaceholder = "Search...", onFilter, onRefresh, onExport, onAddClick, addLabel = "Add New", addPermission, bulkDeletePermission, isLoading, columns, onColumnToggle, selectedCount, onBulkDelete, bulkActionLoading, extraActions }: CommonHeaderProps & { addPermission?: string, bulkDeletePermission?: string }) => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();

  useEffect(() => {
    if (title) {
      dispatch(setPageTitle(title));
    }
  }, [title, dispatch]);

  return (
    <div className="space-y-6 pt-0! sm:space-y-8 mb-5 sm:mb-2 sticky top-[100px] z-[50] -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 bg-light-body-bg dark:bg-(--dark-body) shadow-[0_-55px_0px_0px_var(--light-body-bg)] dark:shadow-[0_-55px_0px_0px_var(--dark-body)] py-4 transition-all">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-(--text-green-primary) tracking-tight mb-2">{title}</h1>
          <p className="text-gray-400 text-sm">{description}</p>
        </div>

        <div className="flex items-center gap-3 flex-wrap">
          {extraActions}
          {onAddClick && (
            <Can permission={addPermission}>
              <Button onClick={onAddClick} className="flex items-center cursor-pointer gap-2 justify-center text-white px-4.5 py-5 rounded-lg dark:shadow-none shadow-md shadow-emerald-100 transition-all active:scale-95">
                <Plus className="w-5 h-5" />
                {addLabel}
              </Button>
            </Can>
          )}
        </div>
      </div>

      {(onSearch || onFilter || onExport) && (
        <div className="dark:bg-(--card-color) dark:border-(--card-border-color) bg-white p-4 sm:p-6 rounded-lg shadow-sm flex flex-col lg:flex-row items-stretch lg:items-center gap-4 flex-wrap">
          {onSearch && (
            <div className="relative flex-1">
              <div className="absolute left-4 rtl:right-4 rtl:left-0 top-1/2 -translate-y-1/2 text-muted-text">
                <Search className="w-5 h-5" />
              </div>
              <Input placeholder={searchPlaceholder === "Search..." ? t("common_search") + "..." : searchPlaceholder} value={searchTerm} onChange={(e) => onSearch(e.target.value)} className="dark:bg-page-body pl-12 rtl:pr-12 rtl:pl-0 py-6 bg-(--input-color) border-(--input-border-color) focus:border-(--text-green-primary) focus:ring-(--text-green-primary) rounded-lg text-sm dark:border-(--card-border-color) w-full" />
            </div>
          )}
          {!!(onFilter || onExport || onRefresh || (columns && onColumnToggle) || (selectedCount && selectedCount > 0)) && (
            <div className="flex flex-col sm:flex-row gap-4">
              {onFilter && (
                <Button variant="outline" onClick={onFilter} className="dark:bg-page-body dark:border-none dark:hover:bg-(--dark-sidebar) dark:hover:text-amber-50 dark:border-(--card-border-color) dark:text-amber-50 flex items-center gap-2 px-6 py-6 rounded-lg shadow-sm! text-body-text hover:bg-input-color hover:text-body-text-hover font-medium transition-all" disabled={isLoading}>
                  <ListFilter className="w-5 h-5" />
                  {t("common_filter_btn")}
                </Button>
              )}
              {onExport && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" className="dark:bg-page-body dark:hover:bg-(--dark-sidebar) dark:border-none dark:hover:text-amber-50 dark:text-amber-50 flex items-center gap-2 px-6 py-6 rounded-lg shadow-sm text-body-text hover:bg-input-color hover:text-body-text-hover font-medium transition-all" disabled={isLoading}>
                      <Download className="w-5 h-5" />
                      {t("common_export")}
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-40">
                    <DropdownMenuLabel>{t("common_export_as") || "Export As"}</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuCheckboxItem onSelect={() => onExport("excel")}>Excel (.xlsx)</DropdownMenuCheckboxItem>
                    <DropdownMenuCheckboxItem onSelect={() => onExport("csv")}>CSV (.csv)</DropdownMenuCheckboxItem>
                    <DropdownMenuCheckboxItem onSelect={() => onExport("pdf")}>PDF (.pdf)</DropdownMenuCheckboxItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              )}
              {onRefresh && (
                <Button onClick={onRefresh} variant="outline" className="dark:bg-page-body dark:hover:bg-(--dark-sidebar) dark:hover:text-amber-50 dark:border-none dark:text-amber-50 flex items-center gap-2 px-6 py-6 rounded-lg border-light-border-color text-body-text hover:bg-input-color hover:text-body-text-hover font-medium transition-all">
                  <RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
                  {t("common_refresh")}
                </Button>
              )}
              {columns && onColumnToggle && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" className="dark:bg-page-body dark:hover:bg-(--dark-sidebar) dark:hover:text-amber-50 dark:border-none dark:text-amber-50 flex items-center gap-2 px-6 py-6 rounded-lg border-light-border-color text-body-text hover:bg-input-color hover:text-body-text-hover font-medium transition-all" disabled={isLoading}>
                      <Settings2 className="w-5 h-5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>{t("common_toggle_columns")}</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    {(() => {
                      const visibleColumnsCount = columns.filter((col) => col.isVisible).length;
                      return columns.map((column) => (
                        <DropdownMenuCheckboxItem
                          key={column.id}
                          checked={column.isVisible}
                          onCheckedChange={() => onColumnToggle(column.id)}
                          disabled={column.isVisible && visibleColumnsCount === 1}
                        >
                          {column.label}
                        </DropdownMenuCheckboxItem>
                      ));
                    })()}
                  </DropdownMenuContent>
                </DropdownMenu>
              )}
              {!!selectedCount && onBulkDelete && (
                <Can permission={bulkDeletePermission}>
                  <Button onClick={onBulkDelete} className="flex items-center gap-2 px-6 py-6 border border-red-300 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg font-semibold transition-all dark:hover:bg-red-900/20 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400" disabled={isLoading || bulkActionLoading}>
                    <Trash2 className="w-5 h-5" />
                    {t("common_bulk_delete", { count: selectedCount })}
                  </Button>
                </Can>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default CommonHeader;