"use client";
import * as React from "react";
import { Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { newKv, type KV } from "./types";

/** Editable key/value rows (headers, query params, cookies). */
export function KvRows({
  rows,
  onChange,
  keyPlaceholder = "Name",
  valuePlaceholder = "Value",
  addLabel = "Add",
  label,
  secret,
}: {
  rows: KV[];
  onChange: (rows: KV[]) => void;
  keyPlaceholder?: string;
  valuePlaceholder?: string;
  addLabel?: string;
  /** Accessible label prefix for inputs. */
  label: string;
  /** Mask values (e.g. cookies). */
  secret?: boolean;
}) {
  const update = (id: string, patch: Partial<KV>) => onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
  const remove = (id: string) => onChange(rows.filter((r) => r.id !== id));
  const add = () => onChange([...rows, newKv()]);
  const lastKeyRef = React.useRef<HTMLInputElement | null>(null);
  const [focusNew, setFocusNew] = React.useState(false);

  React.useEffect(() => {
    if (focusNew && lastKeyRef.current) {
      lastKeyRef.current.focus();
      setFocusNew(false);
    }
  }, [focusNew, rows.length]);

  return (
    <div className="grid gap-1.5">
      {rows.length === 0 ? <p className="text-xs text-fg-subtle">None.</p> : null}
      {rows.map((r, i) => (
        <div key={r.id} className="grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)_auto] items-center gap-1.5">
          <Input
            ref={i === rows.length - 1 ? lastKeyRef : undefined}
            value={r.key}
            onChange={(e) => update(r.id, { key: e.target.value })}
            placeholder={keyPlaceholder}
            aria-label={`${label} ${i + 1} name`}
            className="h-8 font-mono text-[12.5px]"
            autoCapitalize="off"
            autoCorrect="off"
            spellCheck={false}
          />
          <Input
            value={r.value}
            type={secret ? "password" : "text"}
            onChange={(e) => update(r.id, { value: e.target.value })}
            placeholder={valuePlaceholder}
            aria-label={`${label} ${i + 1} value`}
            className="h-8 font-mono text-[12.5px]"
            autoCapitalize="off"
            autoCorrect="off"
            spellCheck={false}
            onKeyDown={(e) => {
              if (e.key === "Enter" && i === rows.length - 1 && r.key.trim()) {
                e.preventDefault();
                add();
                setFocusNew(true);
              }
            }}
          />
          <Button type="button" variant="ghost" size="icon-sm" className="size-8 text-fg-subtle hover:text-danger" onClick={() => remove(r.id)} aria-label={`Remove ${label.toLowerCase()} ${i + 1}`}>
            <X />
          </Button>
        </div>
      ))}
      <div>
        <Button
          type="button"
          variant="ghost"
          size="xs"
          className="-ml-1 text-fg-muted"
          onClick={() => {
            add();
            setFocusNew(true);
          }}
        >
          <Plus className="size-3.5" /> {addLabel}
        </Button>
      </div>
    </div>
  );
}