"use client";

import * as React from "react";
import { ChevronDown, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { adminTexts } from "@/lib/i18n/admin";
import type { AdminActionFn, AdminBulkAction } from "./types";
import type { PendingAction } from "./action-dialog";

const t = adminTexts.table;

/**
 * Selection bar above the table. Bulk actions submit a hidden form holding a
 * single `ids` field with the comma-separated selected row ids — decode it with
 * `bulkIds(formData)` / `bulkIntIds(formData)` from `lib/admin/list`.
 */
export function AdminBulkBar({
  selected,
  actions,
  onClear,
  onRequest,
}: {
  selected: string[];
  actions: AdminBulkAction[];
  onClear: () => void;
  onRequest: (pending: PendingAction) => void;
}) {
  const forms = React.useRef<Record<string, HTMLFormElement | null>>({});
  const ids = selected.join(",");

  const wrap = React.useCallback(
    (action: AdminActionFn) => async (formData: FormData) => {
      try {
        const result = await action(formData);
        if (result && typeof result === "object" && "ok" in result) {
          const r = result as { ok: boolean; error?: string };
          if (r.ok === false) {
            toast.error(r.error || "Action failed");
            return;
          }
        }
        onClear();
      } catch (e) {
        if (e && typeof e === "object" && "digest" in e) throw e;
        toast.error(e instanceof Error ? e.message : "Action failed");
      }
    },
    [onClear],
  );

  if (selected.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-2 border-b border-blue-600/20 bg-blue-600/5 px-3 py-2 dark:bg-blue-500/10">
      {actions.map((action) =>
        !action.confirm && !action.fields?.length ? (
          <form
            key={`f-${action.key}`}
            ref={(el) => {
              forms.current[action.key] = el;
            }}
            action={wrap(action.action)}
            className="hidden"
          >
            <input type="hidden" name="ids" value={ids} />
            <input type="hidden" name="bulkAction" value={action.key} />
            {Object.entries(action.values ?? {}).map(([name, value]) => (
              <input key={name} type="hidden" name={name} value={String(value)} />
            ))}
          </form>
        ) : null,
      )}

      <span className="font-mono text-xs font-semibold text-blue-700 tabular-nums dark:text-blue-300">
        {t.selected.replace("{n}", String(selected.length))}
      </span>

      {actions.length ? (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button type="button" size="sm" variant="outline" className="gap-1">
              {t.bulkActions}
              <ChevronDown className="size-3.5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-56">
            <DropdownMenuLabel className="text-[11px]">
              {t.selected.replace("{n}", String(selected.length))}
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            {actions.map((action) => {
              const needsDialog = Boolean(action.confirm || action.fields?.length);
              return (
                <DropdownMenuItem
                  key={action.key}
                  className="cursor-pointer"
                  variant={action.variant === "destructive" ? "destructive" : "default"}
                  onSelect={() => {
                    if (!needsDialog) {
                      forms.current[action.key]?.requestSubmit();
                      return;
                    }
                    onRequest({
                      title: action.label,
                      description:
                        action.confirm ??
                        t.confirmDefault.replace("{n}", String(selected.length)),
                      fields: action.fields,
                      hidden: {
                        ids,
                        bulkAction: action.key,
                        ...Object.fromEntries(
                          Object.entries(action.values ?? {}).map(([k, v]) => [
                            k,
                            String(v),
                          ]),
                        ),
                      },
                      action: action.action,
                      submitLabel: action.submitLabel ?? action.label,
                      destructive: action.variant === "destructive",
                    });
                  }}
                >
                  {action.icon}
                  {action.label}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      ) : null}

      <Button
        type="button"
        size="sm"
        variant="ghost"
        onClick={onClear}
        className="ml-auto text-muted-foreground"
      >
        <X className="size-3.5" />
        {t.clearSelection}
      </Button>
    </div>
  );
}

export default AdminBulkBar;