"use client";

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

// 📧 ПОПУЛЯРНЫЕ EMAIL ДОМЕНЫ
const POPULAR_DOMAINS = [
  { id: "@gmail.com", name: "Gmail", icon: "📧", description: "Google Mail" },
  { id: "@yahoo.com", name: "Yahoo", icon: "🟣", description: "Yahoo Mail" },
  { id: "@hotmail.com", name: "Hotmail", icon: "🔵", description: "Microsoft Hotmail" },
  { id: "@outlook.com", name: "Outlook", icon: "📬", description: "Microsoft Outlook" },
  { id: "@icloud.com", name: "iCloud", icon: "☁️", description: "Apple iCloud" },
  { id: "@mail.ru", name: "Mail.ru", icon: "🔴", description: "Mail.ru" },
  { id: "@yandex.ru", name: "Yandex", icon: "🟡", description: "Яндекс.Почта" },
  { id: "@rambler.ru", name: "Rambler", icon: "🟢", description: "Rambler" },
] as const;

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

export function EmailDomainSelector({ selectedValues, onToggleValue, onAddCustomValue }: EmailDomainSelectorProps) {
  const [customDomain, setCustomDomain] = useState("");

  const handleAddCustom = () => {
    let domain = customDomain.trim();
    if (domain) {
      // Автоматически добавляем @ если его нет
      if (!domain.startsWith("@")) {
        domain = "@" + domain;
      }
      onAddCustomValue(domain);
      setCustomDomain("");
    }
  };

  return (
    <div className="space-y-4">
      {/* 📧 ПОПУЛЯРНЫЕ ДОМЕНЫ */}
      <div className="grid grid-cols-2 gap-2">
        {POPULAR_DOMAINS.map((domain) => {
          const isSelected = selectedValues.includes(domain.id);
          return (
            <button
              key={domain.id}
              onClick={() => onToggleValue(domain.id)}
              className={`
                relative group p-3 rounded-lg border-2 transition-all duration-200
                hover:shadow-md text-left
                ${isSelected 
                  ? "border-primary bg-primary/10 shadow-md" 
                  : "border-border hover:border-primary/50"
                }
              `}
              title={domain.description}
            >
              <div className="flex items-center gap-2">
                {/* Иконка */}
                <span className="text-lg">{domain.icon}</span>
                
                {/* Информация */}
                <div className="flex-1 min-w-0">
                  <div className={`font-medium text-sm ${
                    isSelected ? "text-primary" : "text-foreground"
                  }`}>
                    {domain.name}
                  </div>
                  <div className="text-xs text-muted-foreground truncate">
                    {domain.id}
                  </div>
                </div>

                {/* Индикатор выбранного */}
                {isSelected && (
                  <div className="w-4 h-4 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                    <span className="text-[10px] text-white">✓</span>
                  </div>
                )}
              </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="example.com (@ добавится автоматически)"
            value={customDomain}
            onChange={(e) => setCustomDomain(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                handleAddCustom();
              }
            }}
          />
          <Button 
            onClick={handleAddCustom}
            disabled={!customDomain.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 popularDomain = POPULAR_DOMAINS.find(domain => domain.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"
                >
                  {popularDomain ? (
                    <>
                      <span>{popularDomain.icon}</span>
                      <span>{popularDomain.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> Система проверяет домен email адреса пользователя. 
        Например, если пользователь ввел &ldquo;user@gmail.com&rdquo;, то значение будет &ldquo;@gmail.com&rdquo;. 
        Выберите домены, при которых должен показываться этот вариант экрана.
      </div>
    </div>
  );
}
