import { Controller, Control } from "react-hook-form";
import { Checkbox } from "@/components/ui/checkbox";
import { Agent } from "@/types/config";

export interface CheckboxListItem {
  value: string;
  label: string;
  description?: string;
}

export interface CheckboxListFieldProps {
  name: "skills" | "rooms" | "tools" | "knowledge_bases" | "delegate_to";
  control: Control<Agent>;
  items: CheckboxListItem[];
  fieldName: keyof Agent;
  onFieldChange: (fieldName: keyof Agent, value: string[]) => void;
  idPrefix: string;
  emptyMessage?: string;
  className?: string;
}

export function CheckboxListField({
  name,
  control,
  items,
  fieldName,
  onFieldChange,
  idPrefix,
  emptyMessage,
  className = "space-y-2 max-h-56 overflow-y-auto border rounded-lg p-2",
}: CheckboxListFieldProps) {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => {
        const selected: string[] = field.value ?? [];

        return (
          <div className={className}>
            {items.length === 0 && emptyMessage ? (
              <p className="text-sm text-muted-foreground text-center py-2">
                {emptyMessage}
              </p>
            ) : (
              items.map((item) => {
                const isChecked = selected.includes(item.value);
                const checkboxId = `${idPrefix}-${item.value}`;
                return (
                  <div
                    key={item.value}
                    className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-white/5 transition-all duration-200"
                  >
                    <Checkbox
                      id={checkboxId}
                      checked={isChecked}
                      onCheckedChange={(checked) => {
                        const updated = checked
                          ? [...selected, item.value]
                          : selected.filter((v) => v !== item.value);
                        field.onChange(updated);
                        onFieldChange(fieldName, updated);
                      }}
                    />
                    <label
                      htmlFor={checkboxId}
                      className="flex-1 cursor-pointer"
                    >
                      <div className="font-medium text-sm">{item.label}</div>
                      {item.description && (
                        <div className="text-xs text-gray-500 dark:text-gray-400">
                          {item.description}
                        </div>
                      )}
                    </label>
                  </div>
                );
              })
            )}
          </div>
        );
      }}
    />
  );
}
