import type { ReactNode } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface ToolbarStat {
  label: string;
  count: number;
  icon: ReactNode;
  tone?: "default" | "success" | "danger" | "warning";
  active?: boolean;
  onClick?: () => void;
}

interface AdminTableToolbarProps {
  stats: ToolbarStat[];
  searchValue: string;
  searchPlaceholder: string;
  onSearchChange: (value: string) => void;
  onSearchClear?: () => void;
  compactStats?: boolean;
  children?: ReactNode;
}

const toneStyles = {
  default: {
    icon: "bg-[#f5fbff] text-slate-600",
    count: "bg-[#008dcc] text-white",
  },
  success: {
    icon: "bg-green-50 text-green-700",
    count: "bg-green-700 text-white",
  },
  danger: {
    icon: "bg-red-50 text-red-700",
    count: "bg-red-700 text-white",
  },
  warning: {
    icon: "bg-[var(--theme-surface-strong)] text-[var(--theme-primary)]",
    count: "bg-[var(--theme-primary)] text-white",
  },
};

export function AdminTableToolbar({
  stats,
  searchValue,
  searchPlaceholder,
  onSearchChange,
  onSearchClear,
  compactStats = false,
  children,
}: AdminTableToolbarProps) {
  return (
    <div className="flex flex-col gap-5 border-b border-[var(--theme-border-soft)] p-4 lg:flex-row lg:items-center lg:justify-between">
      <div className="flex flex-wrap gap-3">
        {stats.map((stat) => {
          const tone = toneStyles[stat.tone || "default"];
          const StatContainer = stat.onClick ? "button" : "div";

          return (
            <StatContainer
              key={stat.label}
              type={stat.onClick ? "button" : undefined}
              onClick={stat.onClick}
              className={`flex items-center rounded-2xl bg-[#d8e6ed] text-left transition ${
                compactStats ? "h-10 gap-2 px-3" : "h-14 gap-3 px-4"
              } ${stat.onClick ? "hover:bg-[var(--theme-surface-strong)]" : ""} ${
                stat.active
                  ? "ring-2 ring-[var(--theme-secondary)]/50 ring-offset-2 ring-offset-white"
                  : ""
              }`}
            >
              <span
                className={`flex items-center justify-center rounded-lg ${
                  compactStats ? "h-7 w-7" : "h-9 w-9"
                } ${tone.icon}`}
              >
                {stat.icon}
              </span>
              <span
                className={`font-bold text-slate-600 ${
                  compactStats ? "text-xs" : "text-sm"
                }`}
              >
                {stat.label}
              </span>
              <span
                className={`flex items-center justify-center rounded-full font-black ${
                  compactStats
                    ? "h-5 min-w-5 px-1.5 text-[10px]"
                    : "h-7 min-w-7 px-2 text-xs"
                } ${tone.count}`}
              >
                {stat.count}
              </span>
            </StatContainer>
          );
        })}
      </div>

      <div className="flex flex-col gap-2 sm:flex-row">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder={searchPlaceholder}
            value={searchValue}
            onChange={(event) => onSearchChange(event.target.value)}
            className="h-11 w-full rounded-2xl border-0 bg-[var(--theme-highlight)] pl-11 pr-11 shadow-none sm:w-80"
          />
          {searchValue && onSearchClear && (
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="absolute right-3 top-1/2 h-7 w-7 -translate-y-1/2 rounded-full text-muted-foreground hover:-translate-y-1/2 hover:bg-white hover:text-foreground active:-translate-y-1/2"
              onClick={onSearchClear}
            >
              <X className="h-4 w-4" />
              <span className="sr-only">Clear search</span>
            </Button>
          )}
        </div>
        {children}
      </div>
    </div>
  );
}