"use client";

import * as React from "react";

import { RBAC_MODULES, type PermissionModule } from "@/config/rbac-permissions";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

import { PermissionModulePanel } from "./permission-module-panel";
import { useDebouncedValue } from "@/hooks/use-debounced-value";

import { PermissionSearchInput } from "./permission-search-input";

export type PermissionPickerProps = {
  modules?: PermissionModule[];
  value: string[];
  onChange: (permissions: string[]) => void;
  readOnly?: boolean;
  defaultExpanded?: string[];
  compact?: boolean;
  className?: string;
};

export function PermissionPicker({
  modules = RBAC_MODULES,
  value,
  onChange,
  readOnly = false,
  defaultExpanded = [],
  compact = false,
  className,
}: PermissionPickerProps) {
  const [query, setQuery] = React.useState("");
  const debouncedQuery = useDebouncedValue(query);

  const allPermissionNames = React.useMemo(
    () => modules.flatMap((m) => m.permissions.map((p) => p.name)),
    [modules],
  );

  const selectedCount = value.filter((p) => allPermissionNames.includes(p)).length;
  const totalCount = allPermissionNames.length;
  const progress = totalCount > 0 ? Math.round((selectedCount / totalCount) * 100) : 0;

  const selectAll = () => {
    if (readOnly) return;
    onChange([...new Set([...value, ...allPermissionNames])]);
  };

  const clearAll = () => {
    if (readOnly) return;
    onChange(value.filter((p) => !allPermissionNames.includes(p)));
  };

  const visibleModules = React.useMemo(() => {
    const q = debouncedQuery.trim().toLowerCase();
    if (!q) return modules;
    return modules.filter((module) =>
      module.permissions.some(
        (p) =>
          p.name.toLowerCase().includes(q) ||
          p.label.toLowerCase().includes(q) ||
          p.description.toLowerCase().includes(q) ||
          module.label.toLowerCase().includes(q),
      ),
    );
  }, [modules, debouncedQuery]);

  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <PermissionSearchInput
          value={query}
          onChange={setQuery}
          className="sm:max-w-sm"
        />
        {!readOnly ? (
          <div className="flex gap-2">
            <Button type="button" variant="outline" size="sm" onClick={selectAll}>
              Select all
            </Button>
            <Button type="button" variant="outline" size="sm" onClick={clearAll}>
              Clear all
            </Button>
          </div>
        ) : null}
      </div>

      <div className="space-y-2">
        <div className="flex items-center justify-between text-sm">
          <span className="text-muted-foreground">
            {selectedCount} of {totalCount} permissions selected
          </span>
          <span className="font-medium">{progress}%</span>
        </div>
        <Progress value={progress} className="h-2" />
      </div>

      <div className="space-y-3">
        {visibleModules.length === 0 ? (
          <p className="py-8 text-center text-muted-foreground text-sm">No permissions match your search.</p>
        ) : (
          visibleModules.map((module) => (
            <PermissionModulePanel
              key={module.key}
              module={module}
              value={value}
              onChange={onChange}
              readOnly={readOnly}
              query={debouncedQuery}
              defaultOpen={defaultExpanded.includes(module.key) || Boolean(debouncedQuery)}
              compact={compact}
            />
          ))
        )}
      </div>
    </div>
  );
}