"use client";

// Single-leaf editor card for the composite search builder.
//
// Renders one row when the parent says "compact mode" (the simple-search
// case: root is one AND group with one leaf, no negation), otherwise a
// boxed card with all controls visible. The card shows its layer swatch,
// scope dropdown, query input, regex / show-hits / NOT toggles, a live
// "→ N videos" count, a cached badge when applicable, and a delete button.

import { useState, type ReactNode } from "react";
import type { LeafNode, LayerScope } from "../lib/searchQuery";
import type { LeafState } from "../lib/searchEval";
import { matchAliases } from "../lib/searchAliases";
import { useSearchData } from "./SearchDataContext";
import { LayerSwatch, swatchSoftBgStyle } from "./LayerSwatch";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Checkbox } from "./ui/checkbox";
import { cn } from "../lib/utils";

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

type Props = {
  leaf: LeafNode;
  state: LeafState | undefined;
  compact?: boolean;
  /** Rendered beside the query input in compact mode — where the search bar
   *  puts its submit button, so the two sit on one line at any width. */
  inputTrailing?: ReactNode;
  canDelete: boolean;
  canNegate?: boolean;
  isOnlyLeaf?: boolean;
  onChange: (next: LeafNode) => void;
  onDelete: () => void;
  onWrapInGroup?: () => void;
};

// LABELS ONLY. The `tags` scope searches yt-dlp KEYWORDS from
// metadata.info.json (TranscriptSummary.tags) and is shown as "Keywords",
// because "Tags" now means the operator's curated per-video vocabulary
// (lib/curatedTags.ts) — the chip row in the filter panel. The code token, the
// URL and the MCP `scopes` enum stay `"tags"`: renaming those would break every
// saved query and share link to fix a word on a screen.
// Exported because the result list labels its per-leaf sections with the same
// words (SearchResults.tsx): a reader picks "Keywords" in the builder and has
// to find "Keywords" over the hits it produced, so there is one table, not two
// that drift.
export const SCOPE_LABELS: Record<LayerScope, string> = {
  transcripts: "Transcripts",
  chat: "Live chat",
  posts: "Posts",
  metadata: "Title / channel",
  description: "Description",
  tags: "Keywords",
};

export default function QueryLeafView({
  leaf,
  state,
  compact = false,
  inputTrailing,
  canDelete,
  canNegate = true,
  onChange,
  onDelete,
  onWrapInGroup,
}: Props) {
  const update = (patch: Partial<LeafNode>) =>
    onChange({ ...leaf, ...patch });

  const regexInvalid =
    leaf.useRegex && leaf.query.trim() !== "" && !isValidRegex(leaf.query);

  // Known-alias suggestions. A curated concept ("loli") that a typed term
  // matches offers a better regex the user can Apply — never forced. In regex
  // mode we only offer when the whole query is exactly a trigger (a bare
  // literal), so a hand-written pattern — or an already-applied suggestion —
  // isn't second-guessed. Dismissals are scoped to the current query text so a
  // new term re-offers. See ../lib/searchAliases.
  const { aliases } = useSearchData();
  const [dismissed, setDismissed] = useState<{ q: string; ids: Set<string> }>({
    q: "",
    ids: new Set(),
  });
  const activeDismissed = dismissed.q === leaf.query ? dismissed.ids : null;
  const suggestions = matchAliases(leaf.query, leaf.scope, aliases, {
    regexMode: leaf.useRegex,
  }).filter((a) => !activeDismissed?.has(a.id));
  const dismissAlias = (id: string) =>
    setDismissed((prev) => {
      const ids =
        prev.q === leaf.query ? new Set(prev.ids) : new Set<string>();
      ids.add(id);
      return { q: leaf.query, ids };
    });
  const applyAlias = (suggestion: string, useRegex: boolean) =>
    update({ query: suggestion, useRegex });

  const aliasSuggestions =
    suggestions.length > 0 ? (
      <div
        className="flex flex-col gap-1"
        role="status"
        aria-live="polite"
        data-testid={`leaf-alias-suggestions-${leaf.id}`}
      >
        {suggestions.map((a) => (
          <div
            key={a.id}
            className="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border-l-2 border-primary/60 bg-primary/5 px-2 py-1 text-xs animate-in fade-in slide-in-from-top-1 motion-reduce:animate-none"
            data-testid={`leaf-alias-${leaf.id}-${a.id}`}
          >
            <span className="text-muted-foreground">
              <span aria-hidden="true">💡</span> alias{" "}
              <span className="font-medium text-foreground">“{a.label}”</span>
            </span>
            <span aria-hidden="true" className="text-muted-foreground">
              →
            </span>
            <code className="min-w-0 max-w-[16rem] truncate font-mono text-foreground/90">
              {a.suggestion}
            </code>
            <div className="ml-auto flex items-center gap-1">
              <Button
                type="button"
                size="xs"
                variant="secondary"
                onClick={() => applyAlias(a.suggestion, a.useRegex)}
                data-testid={`leaf-alias-apply-${leaf.id}`}
              >
                Apply
              </Button>
              <Button
                type="button"
                size="xs"
                variant="ghost"
                className="text-muted-foreground"
                onClick={() => dismissAlias(a.id)}
                aria-label={`Dismiss ${a.label} suggestion`}
                data-testid={`leaf-alias-dismiss-${leaf.id}`}
              >
                Dismiss
              </Button>
            </div>
            {a.note && (
              <p className="w-full text-[11px] leading-snug text-muted-foreground">
                {a.note}
              </p>
            )}
          </div>
        ))}
      </div>
    ) : null;

  const placeholder =
    leaf.scope === "metadata"
      ? leaf.useRegex
        ? "Title/channel regex..."
        : "Match against title or channel..."
      : leaf.scope === "description"
        ? leaf.useRegex
          ? "Description regex..."
          : "Search video descriptions..."
        : leaf.scope === "tags"
        ? leaf.useRegex
          ? "Keywords regex..."
          : "Search video keywords..."
        : leaf.scope === "chat"
          ? leaf.useRegex
            ? "Live chat regex..."
            : "Search live chat..."
          : leaf.useRegex
            ? "Regex pattern (case-insensitive)..."
            : "Search transcripts...";

  const queryInput = (
    <Input
      type="search"
      value={leaf.query}
      onChange={(e) => update({ query: e.target.value })}
      placeholder={placeholder}
      data-testid={`leaf-query-${leaf.id}`}
      aria-invalid={regexInvalid || undefined}
      className={cn(
        // text-base below sm: iOS zooms the page on focus for anything under
        // 16px, and it never zooms back out.
        "flex-1 min-w-0 h-11 text-base sm:h-9 sm:text-sm",
        regexInvalid && "border-destructive",
        leaf.useRegex && "font-mono",
      )}
    />
  );

  const scopeSelect = (
    <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
      <select
        value={leaf.scope}
        onChange={(e) => update({ scope: e.target.value as LayerScope })}
        data-testid={`leaf-scope-${leaf.id}`}
        className="rounded border border-border bg-card text-foreground px-1.5 py-1 text-base sm:text-xs font-mono"
      >
        {(
          [
            "transcripts",
            "chat",
            "posts",
            "metadata",
            "description",
            "tags",
          ] as const
        ).map((s) => (
          <option key={s} value={s}>
            {SCOPE_LABELS[s]}
          </option>
        ))}
      </select>
    </label>
  );

  const regexToggle = (
    <label className="flex items-center gap-1 text-xs select-none">
      <Checkbox
        checked={leaf.useRegex}
        onCheckedChange={(checked) => update({ useRegex: checked === true })}
        data-testid={`leaf-regex-${leaf.id}`}
      />
      Regex
    </label>
  );

  const countBadge = state ? (
    <span
      className="ml-auto text-xs text-muted-foreground shrink-0"
      data-testid={`leaf-count-${leaf.id}`}
    >
      → {state.slugCount} video{state.slugCount === 1 ? "" : "s"}
      {state.active ? "…" : ""}
    </span>
  ) : null;

  const cachedBadge =
    state?.cached && !state.active ? (
      <span
        className="ml-1 text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-success-soft text-success"
        data-cache-hit={leaf.id}
        title="Served from layer cache"
      >
        cached
      </span>
    ) : null;

  if (compact) {
    return (
      <div className="flex flex-col gap-1.5">
        <div className="flex items-center gap-2">
          <LayerSwatch leafId={leaf.id} />
          {queryInput}
          {inputTrailing}
        </div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
          {scopeSelect}
          {regexToggle}
          {countBadge}
          {cachedBadge}
        </div>
        {aliasSuggestions}
      </div>
    );
  }

  return (
    <div
      className="flex flex-col gap-2 rounded-lg border bg-card/60 px-3 py-2"
      style={swatchSoftBgStyle(leaf.id)}
      data-leaf-id={leaf.id}
    >
      <div className="flex items-center gap-2">
        <LayerSwatch leafId={leaf.id} />
        {queryInput}
        {countBadge}
      </div>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
        {scopeSelect}
        {regexToggle}
        <label className="flex items-center gap-1 select-none">
          <Checkbox
            checked={leaf.contributeHits}
            onCheckedChange={(checked) =>
              update({ contributeHits: checked === true })
            }
            data-testid={`leaf-hits-${leaf.id}`}
          />
          Show hits in results
        </label>
        {canNegate && (
          <label className="flex items-center gap-1 select-none">
            <Checkbox
              checked={leaf.negate}
              onCheckedChange={(checked) =>
                update({ negate: checked === true })
              }
              className={negateCheckboxClass}
              data-testid={`leaf-negate-${leaf.id}`}
            />
            NOT
          </label>
        )}
        {cachedBadge}
        <div className="ml-auto flex items-center gap-1">
          {onWrapInGroup && (
            <Button
              type="button"
              variant="link"
              size="sm"
              onClick={onWrapInGroup}
              className="text-xs text-muted-foreground"
              title="Wrap this layer in a sub-group so you can add OR siblings"
              data-testid={`leaf-wrap-${leaf.id}`}
            >
              wrap
            </Button>
          )}
          <Button
            type="button"
            variant="outline"
            size="icon-xs"
            onClick={onDelete}
            disabled={!canDelete}
            aria-label="Remove layer"
            data-testid={`leaf-delete-${leaf.id}`}
            className="text-xs"
          >
            ×
          </Button>
        </div>
      </div>
      {regexInvalid && (
        <p className="text-xs text-destructive font-mono">Invalid regex</p>
      )}
      {aliasSuggestions}
    </div>
  );
}

function isValidRegex(s: string): boolean {
  try {
    new RegExp(s);
    return true;
  } catch {
    return false;
  }
}