"use client";

import { useState } from "react";
import { Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Tag } from "@/types";

const TAG_COLORS = [
  "#ef4444", "#f97316", "#eab308", "#22c55e",
  "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899",
];

interface TagPickerProps {
  tags: Tag[];
  selectedIds: string[];
  onChange: (ids: string[]) => void;
  onCreateTag: (name: string, color: string) => Promise<Tag>;
  disabled?: boolean;
}

export function TagPicker({
  tags,
  selectedIds,
  onChange,
  onCreateTag,
  disabled = false,
}: TagPickerProps) {
  const [showCreate, setShowCreate] = useState(false);
  const [newName, setNewName] = useState("");
  const [newColor, setNewColor] = useState(TAG_COLORS[0]);

  function toggleTag(id: string) {
    if (disabled) return;
    if (selectedIds.includes(id)) {
      onChange(selectedIds.filter((t) => t !== id));
    } else {
      onChange([...selectedIds, id]);
    }
  }

  async function handleCreate() {
    if (disabled) return;
    if (!newName.trim()) return;
    const tag = await onCreateTag(newName.trim(), newColor);
    onChange([...selectedIds, tag.id]);
    setNewName("");
    setShowCreate(false);
  }

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-1.5">
        {tags.map((tag) => {
          const selected = selectedIds.includes(tag.id);
          return (
            <button
              key={tag.id}
              type="button"
              onClick={() => toggleTag(tag.id)}
              disabled={disabled}
              className={cn(
                "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium transition-all cursor-pointer border",
                selected
                  ? "border-transparent text-white"
                  : "border-border text-muted-foreground hover:border-foreground/20",
                disabled && "cursor-not-allowed opacity-60"
              )}
              style={
                selected
                  ? { backgroundColor: tag.color }
                  : undefined
              }
            >
              {!selected && (
                <span
                  className="h-2 w-2 rounded-full shrink-0"
                  style={{ backgroundColor: tag.color }}
                />
              )}
              {tag.name}
              {selected && <X className="h-3 w-3" />}
            </button>
          );
        })}

        <button
          type="button"
          onClick={() => setShowCreate(!showCreate)}
          disabled={disabled}
          className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2.5 py-0.5 text-xs text-muted-foreground hover:border-foreground/30 hover:text-foreground transition-colors cursor-pointer"
        >
          <Plus className="h-3 w-3" />
          New tag
        </button>
      </div>

      {showCreate && !disabled && (
        <div className="flex items-center gap-2">
          <input
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            placeholder="Tag name"
            className="flex-1 h-7 rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                handleCreate();
              }
              if (e.key === "Escape") setShowCreate(false);
            }}
            autoFocus
          />
          <div className="flex gap-0.5">
            {TAG_COLORS.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setNewColor(c)}
                className={cn(
                  "h-5 w-5 rounded-full cursor-pointer transition-transform",
                  newColor === c && "scale-125 ring-2 ring-ring ring-offset-1"
                )}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
          <button
            type="button"
            onClick={handleCreate}
            className="h-7 px-2 rounded-md bg-primary text-primary-foreground text-xs font-medium cursor-pointer hover:bg-primary/90 transition-colors"
          >
            Add
          </button>
        </div>
      )}
    </div>
  );
}