import { X } from "lucide-react";
import { useState } from "react";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog";
import { Input } from "../../../components/ui/input";
import type { TenantSummary } from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import {
  type DomainConflict,
  findDomainConflict,
  formatDomainConflictMessage,
  normalizeDomainTokens,
} from "../utils/domainTags";

type DomainTagInputProps = {
  id?: string;
  value: string[];
  onChange: (domains: string[]) => void;
  tenants?: TenantSummary[];
  currentTenantId?: string;
  confirmedConflicts?: string[];
  onConfirmedConflictsChange?: (domains: string[]) => void;
  placeholder?: string;
};

export function DomainTagInput({
  id,
  value,
  onChange,
  tenants = [],
  currentTenantId,
  confirmedConflicts = [],
  onConfirmedConflictsChange,
  placeholder,
}: DomainTagInputProps) {
  const [input, setInput] = useState("");
  const [pendingConflict, setPendingConflict] = useState<DomainConflict | null>(
    null,
  );

  const addConfirmedConflict = (domain: string) => {
    if (!confirmedConflicts.includes(domain)) {
      onConfirmedConflictsChange?.([...confirmedConflicts, domain]);
    }
  };

  const removeConfirmedConflict = (domain: string) => {
    if (confirmedConflicts.includes(domain)) {
      onConfirmedConflictsChange?.(
        confirmedConflicts.filter((item) => item !== domain),
      );
    }
  };

  const addDomain = (domain: string, confirmed = false) => {
    if (value.includes(domain)) {
      return;
    }
    onChange([...value, domain]);
    if (confirmed) {
      addConfirmedConflict(domain);
    }
  };

  const tokenizeInput = () => {
    const tokens = normalizeDomainTokens(input);
    if (tokens.length === 0) {
      setInput("");
      return;
    }

    for (const token of tokens) {
      if (value.includes(token)) {
        continue;
      }
      const conflict = findDomainConflict(token, tenants, currentTenantId);
      if (conflict && !confirmedConflicts.includes(token)) {
        setPendingConflict(conflict);
        setInput("");
        return;
      }
      addDomain(token, confirmedConflicts.includes(token));
    }
    setInput("");
  };

  const removeDomain = (domain: string) => {
    onChange(value.filter((item) => item !== domain));
    removeConfirmedConflict(domain);
  };

  return (
    <>
      <div className="flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring">
        {value.map((domain) => (
          <Badge
            key={domain}
            variant={confirmedConflicts.includes(domain) ? "warning" : "muted"}
            className="gap-1 rounded-md"
          >
            <span>{domain}</span>
            <button
              type="button"
              className="inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-background/60"
              onClick={() => removeDomain(domain)}
              aria-label={t("ui.common.remove", "삭제")}
            >
              <X size={12} />
            </button>
          </Badge>
        ))}
        <Input
          id={id}
          value={input}
          onChange={(event) => setInput(event.target.value)}
          onBlur={tokenizeInput}
          onKeyDown={(event) => {
            if (
              event.key === " " ||
              event.key === "Enter" ||
              event.key === "," ||
              event.key === ";"
            ) {
              event.preventDefault();
              tokenizeInput();
            }
          }}
          className="h-7 min-w-[180px] flex-1 border-0 px-0 py-0 shadow-none focus-visible:ring-0"
          placeholder={value.length === 0 ? placeholder : undefined}
        />
      </div>

      <Dialog
        open={pendingConflict !== null}
        onOpenChange={(open) => {
          if (!open) {
            setPendingConflict(null);
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {t("ui.admin.tenants.domain_conflict.title", "도메인 충돌")}
            </DialogTitle>
            <DialogDescription>
              {pendingConflict
                ? t(
                    "ui.admin.tenants.domain_conflict.description",
                    formatDomainConflictMessage(pendingConflict),
                  )
                : ""}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => setPendingConflict(null)}
            >
              {t("ui.common.cancel", "취소")}
            </Button>
            <Button
              type="button"
              onClick={() => {
                if (pendingConflict) {
                  addDomain(pendingConflict.domain, true);
                }
                setPendingConflict(null);
              }}
            >
              {t("ui.common.continue", "계속 진행")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}
