"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { TextInput } from "@/components/ui/TextInput/TextInput";

// 🔮 ЗНАКИ ЗОДИАКА С КРАСИВЫМИ ИКОНКАМИ
const ZODIAC_SIGNS = [
  { id: "aries", name: "Овен", icon: "♈", dates: "21 марта - 19 апреля" },
  { id: "taurus", name: "Телец", icon: "♉", dates: "20 апреля - 20 мая" },
  { id: "gemini", name: "Близнецы", icon: "♊", dates: "21 мая - 20 июня" },
  { id: "cancer", name: "Рак", icon: "♋", dates: "21 июня - 22 июля" },
  { id: "leo", name: "Лев", icon: "♌", dates: "23 июля - 22 августа" },
  { id: "virgo", name: "Дева", icon: "♍", dates: "23 августа - 22 сентября" },
  { id: "libra", name: "Весы", icon: "♎", dates: "23 сентября - 22 октября" },
  { id: "scorpio", name: "Скорпион", icon: "♏", dates: "23 октября - 21 ноября" },
  { id: "sagittarius", name: "Стрелец", icon: "♐", dates: "22 ноября - 21 декабря" },
  { id: "capricorn", name: "Козерог", icon: "♑", dates: "22 декабря - 19 января" },
  { id: "aquarius", name: "Водолей", icon: "♒", dates: "20 января - 18 февраля" },
  { id: "pisces", name: "Рыбы", icon: "♓", dates: "19 февраля - 20 марта" },
] as const;

interface ZodiacSelectorProps {
  selectedValues: string[];
  onToggleValue: (value: string) => void;
  onAddCustomValue: (value: string) => void;
}

export function ZodiacSelector({ selectedValues, onToggleValue, onAddCustomValue }: ZodiacSelectorProps) {
  const [customValue, setCustomValue] = useState("");

  const handleAddCustom = () => {
    if (customValue.trim()) {
      onAddCustomValue(customValue.trim());
      setCustomValue("");
    }
  };

  return (
    <div className="space-y-4">
      {/* 🔮 КРАСИВАЯ СЕТКА ЗНАКОВ ЗОДИАКА */}
      <div className="grid grid-cols-3 gap-2">
        {ZODIAC_SIGNS.map((sign) => {
          const isSelected = selectedValues.includes(sign.id);
          return (
            <button
              key={sign.id}
              onClick={() => onToggleValue(sign.id)}
              className={`
                relative group p-3 rounded-lg border-2 transition-all duration-200
                hover:shadow-md hover:scale-105 text-center
                ${isSelected 
                  ? "border-primary bg-primary/10 shadow-md" 
                  : "border-border hover:border-primary/50"
                }
              `}
              title={sign.dates}
            >
              {/* Иконка знака */}
              <div className={`text-2xl mb-1 transition-all duration-200 ${
                isSelected ? "scale-110" : "group-hover:scale-105"
              }`}>
                {sign.icon}
              </div>
              
              {/* Название */}
              <div className={`text-xs font-medium transition-colors duration-200 ${
                isSelected ? "text-primary" : "text-foreground"
              }`}>
                {sign.name}
              </div>

              {/* Индикатор выбранного */}
              {isSelected && (
                <div className="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full flex items-center justify-center">
                  <span className="text-[10px] text-white">✓</span>
                </div>
              )}
            </button>
          );
        })}
      </div>

      {/* 🎯 ДОБАВЛЕНИЕ КАСТОМНЫХ ЗНАЧЕНИЙ */}
      <div className="space-y-2">
        <label className="block text-sm font-medium text-foreground">
          Или добавить пользовательское значение:
        </label>
        <div className="flex gap-2">
          <TextInput
            placeholder="Например: virgo или другое значение..."
            value={customValue}
            onChange={(e) => setCustomValue(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                handleAddCustom();
              }
            }}
          />
          <Button 
            onClick={handleAddCustom}
            disabled={!customValue.trim()}
            className="text-sm px-3 py-1"
          >
            Добавить
          </Button>
        </div>
      </div>

      {/* 📋 ВЫБРАННЫЕ ЗНАЧЕНИЯ */}
      {selectedValues.length > 0 && (
        <div className="space-y-2">
          <label className="block text-sm font-medium text-foreground">
            Выбранные значения:
          </label>
          <div className="flex flex-wrap gap-1">
            {selectedValues.map((value) => {
              const zodiacSign = ZODIAC_SIGNS.find(sign => sign.id === value);
              return (
                <span
                  key={value}
                  className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-primary/10 text-primary rounded-full"
                >
                  {zodiacSign ? (
                    <>
                      <span>{zodiacSign.icon}</span>
                      <span>{zodiacSign.name}</span>
                    </>
                  ) : (
                    <span>{value}</span>
                  )}
                  <button
                    onClick={() => onToggleValue(value)}
                    className="ml-1 hover:text-red-500 transition-colors"
                    title="Удалить"
                  >
                    ×
                  </button>
                </span>
              );
            })}
          </div>
        </div>
      )}

      {/* 💡 ПОДСКАЗКА */}
      <div className="text-xs text-muted-foreground bg-muted/30 rounded-lg p-3">
        <strong>💡 Как это работает:</strong> Знак зодиака автоматически определяется из 
        даты рождения пользователя. Выберите знаки, при которых должен показываться 
        этот вариант экрана.
      </div>
    </div>
  );
}
