"use client";

// Group container for the composite search builder. Renders its op
// (AND / OR), optional NOT flag, live count, and children (leaves or
// nested groups). When the root group is in compact mode (single leaf,
// no negation), the parent renders just the leaf directly without this
// wrapper to keep the simple-search case visually minimal.

import {
  isGroup,
  isLeaf,
  newGroup,
  newLeaf,
  type GroupNode,
  type QueryNode,
} from "../lib/searchQuery";
import type { GroupState, LeafState } from "../lib/searchEval";
import QueryLeafView from "./QueryLeafView";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";

const negateCheckboxClass =
  "border-destructive/60 data-[state=checked]:bg-destructive data-[state=checked]:border-destructive data-[state=checked]:text-destructive-foreground";

type Props = {
  group: GroupNode;
  isRoot: boolean;
  depth: number;
  leafStates: ReadonlyMap<string, LeafState>;
  groupStates: ReadonlyMap<string, GroupState>;
  onChangeNode: (id: string, next: QueryNode) => void;
  onRemoveNode: (id: string) => void;
  onAddChild: (groupId: string, child: QueryNode) => void;
  onWrapLeaf: (leafId: string) => void;
  onUnwrapGroup: (groupId: string) => void;
};

export default function QueryGroupView({
  group,
  isRoot,
  depth,
  leafStates,
  groupStates,
  onChangeNode,
  onRemoveNode,
  onAddChild,
  onWrapLeaf,
  onUnwrapGroup,
}: Props) {
  const state = groupStates.get(group.id);
  const onlyLeafCount = group.children.filter(isLeaf).length;

  const indent = depth === 0 ? "" : "pl-4 border-l-2 border-border";

  return (
    <div
      className={`flex flex-col gap-2 ${indent}`}
      data-group-id={group.id}
      data-group-op={group.op}
    >
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
        <select
          value={group.op}
          onChange={(e) =>
            onChangeNode(group.id, { ...group, op: e.target.value as "AND" | "OR" })
          }
          data-testid={`group-op-${group.id}`}
          className="rounded border border-border bg-card text-foreground px-1.5 py-1 text-xs font-medium"
        >
          <option value="AND">ALL of (AND)</option>
          <option value="OR">ANY of (OR)</option>
        </select>
        {!isRoot && (
          <label className="flex items-center gap-1 select-none">
            <Checkbox
              checked={group.negate}
              onCheckedChange={(checked) =>
                onChangeNode(group.id, { ...group, negate: checked === true })
              }
              className={negateCheckboxClass}
              data-testid={`group-negate-${group.id}`}
            />
            NOT
          </label>
        )}
        {state && (
          <span
            className="text-muted-foreground"
            data-testid={`group-count-${group.id}`}
          >
            → {state.slugCount} video{state.slugCount === 1 ? "" : "s"}
          </span>
        )}
        {!isRoot && (
          <div className="ml-auto flex items-center gap-1">
            <Button
              type="button"
              variant="link"
              size="sm"
              onClick={() => onUnwrapGroup(group.id)}
              className="text-xs text-muted-foreground"
              title={
                group.negate
                  ? "Flatten this group into its parent (each child gets NOT applied)"
                  : "Flatten this group into its parent"
              }
              data-testid={`group-unwrap-${group.id}`}
            >
              unwrap
            </Button>
            <Button
              type="button"
              variant="outline"
              size="icon-xs"
              onClick={() => onRemoveNode(group.id)}
              aria-label="Remove group"
              data-testid={`group-delete-${group.id}`}
              className="text-xs"
            >
              ×
            </Button>
          </div>
        )}
      </div>

      <div className="flex flex-col gap-2">
        {group.children.map((child) => {
          if (isLeaf(child)) {
            return (
              <QueryLeafView
                key={child.id}
                leaf={child}
                state={leafStates.get(child.id)}
                compact={false}
                canDelete={group.children.length > 1 || !isRoot}
                onChange={(next) => onChangeNode(child.id, next)}
                onDelete={() => onRemoveNode(child.id)}
                onWrapInGroup={() => onWrapLeaf(child.id)}
                isOnlyLeaf={onlyLeafCount === 1}
              />
            );
          }
          if (isGroup(child)) {
            return (
              <QueryGroupView
                key={child.id}
                group={child}
                isRoot={false}
                depth={depth + 1}
                leafStates={leafStates}
                groupStates={groupStates}
                onChangeNode={onChangeNode}
                onRemoveNode={onRemoveNode}
                onAddChild={onAddChild}
                onWrapLeaf={onWrapLeaf}
                onUnwrapGroup={onUnwrapGroup}
              />
            );
          }
          return null;
        })}
      </div>

      <div className="flex flex-wrap items-center gap-2 text-xs">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() =>
            onAddChild(
              group.id,
              newLeaf({ scope: "transcripts", contributeHits: true }),
            )
          }
          data-testid={`group-add-leaf-${group.id}`}
        >
          + Add layer
        </Button>
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() =>
            onAddChild(
              group.id,
              newGroup({
                op: "OR",
                children: [newLeaf({ scope: "transcripts" })],
              }),
            )
          }
          data-testid={`group-add-group-${group.id}`}
        >
          + Add group
        </Button>
      </div>
    </div>
  );
}