'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { Check, ChevronDown, Copy, Link2, Save, Trash2 } from 'lucide-react';
import { useCallback, useMemo, useState, type Dispatch, type SetStateAction } from 'react';

interface UTMParams {
  utmSource: string;
  utmMedium: string;
  utmCampaign: string;
  utmTerm: string;
  utmContent: string;
}

interface UTMBuilderProps {
  baseUrl: string;
  utmParams: UTMParams;
  // Принимает и объект, и functional updater — совместимо с React.setState.
  // Updater нужен, чтобы избежать stale-closure при быстром переключении
  // фокуса между полями UTM.
  onUTMChange: Dispatch<SetStateAction<UTMParams>>;
  onSaveTemplate?: (params: UTMParams & { name: string }) => void;
  onTemplateSaved?: () => void;
  isOpen?: boolean;
  onOpenChange?: (isOpen: boolean) => void;
}

const EMPTY_PARAMS: UTMParams = {
  utmSource: '',
  utmMedium: '',
  utmCampaign: '',
  utmTerm: '',
  utmContent: '',
};

const UTM_FIELDS: Array<{ key: keyof UTMParams; label: string; placeholder: string }> = [
  { key: 'utmSource', label: 'utm_source', placeholder: 'google, facebook, ...' },
  { key: 'utmMedium', label: 'utm_medium', placeholder: 'cpc, email, social, ...' },
  { key: 'utmCampaign', label: 'utm_campaign', placeholder: 'summer-sale, black-friday, ...' },
  { key: 'utmTerm', label: 'utm_term', placeholder: 'keyword (для paid search)' },
  { key: 'utmContent', label: 'utm_content', placeholder: 'ad-variant-a, banner-1, ...' },
];

export default function UTMBuilder({
  baseUrl,
  utmParams,
  onUTMChange,
  onSaveTemplate,
  onTemplateSaved,
  isOpen: externalIsOpen,
  onOpenChange,
}: UTMBuilderProps) {
  const [internalIsOpen, setInternalIsOpen] = useState(false);
  const isOpen = externalIsOpen !== undefined ? externalIsOpen : internalIsOpen;
  const setIsOpen = onOpenChange || setInternalIsOpen;

  const [showSaveTemplate, setShowSaveTemplate] = useState(false);
  const [templateName, setTemplateName] = useState('');
  const [isCopied, setIsCopied] = useState(false);

  // Controlled — никакого внутреннего дубля state. Родитель держит utmParams,
  // мы читаем их напрямую и эмитим изменения через onUTMChange. Это убирает
  // race condition, из-за которой при быстром вводе часть символов терялась.
  const fullUrl = useMemo(() => {
    if (!baseUrl) return '';

    const params = new URLSearchParams();
    if (utmParams.utmSource) params.set('utm_source', utmParams.utmSource);
    if (utmParams.utmMedium) params.set('utm_medium', utmParams.utmMedium);
    if (utmParams.utmCampaign) params.set('utm_campaign', utmParams.utmCampaign);
    if (utmParams.utmTerm) params.set('utm_term', utmParams.utmTerm);
    if (utmParams.utmContent) params.set('utm_content', utmParams.utmContent);

    const queryString = params.toString();
    if (!queryString) return baseUrl;

    const separator = baseUrl.includes('?') ? '&' : '?';
    return `${baseUrl}${separator}${queryString}`;
  }, [baseUrl, utmParams]);

  const hasAnyParam = Object.values(utmParams).some((value) => (value || '').trim().length > 0);

  const handleFieldChange = useCallback((key: keyof UTMParams, value: string) => {
    // Functional updater гарантирует, что React даст нам актуальный prev
    // на момент обработки onChange, даже если несколько событий пришли подряд.
    onUTMChange((prev) => ({ ...prev, [key]: value }));
  }, [onUTMChange]);

  const handleClearAll = () => {
    onUTMChange(EMPTY_PARAMS);
  };

  const handleSaveTemplate = () => {
    if (!templateName.trim()) return;
    onSaveTemplate?.({ name: templateName, ...utmParams });
    onTemplateSaved?.();
    setTemplateName('');
    setShowSaveTemplate(false);
  };

  const handleCopyUrl = async () => {
    if (!fullUrl) return;
    try {
      await navigator.clipboard.writeText(fullUrl);
      setIsCopied(true);
      window.setTimeout(() => setIsCopied(false), 1500);
    } catch {
      // Игнорируем сбой копирования — пользователь увидит неизменённую кнопку.
    }
  };

  return (
    <div className="overflow-hidden rounded-xl border border-white/10 bg-white/[0.02] backdrop-blur-md">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="group flex w-full items-center justify-between px-4 py-3 transition-colors hover:bg-white/[0.03]"
      >
        <span className="flex items-center gap-3">
          <span className={`inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors ${
            hasAnyParam
              ? 'border-violet-500/30 bg-violet-500/20 text-violet-300'
              : 'border-white/10 bg-white/[0.03] text-gray-400 group-hover:border-white/20 group-hover:text-violet-300'
          }`}>
            <Link2 className="h-4 w-4" />
          </span>
          <span className="flex flex-col items-start">
            <span className="text-sm font-medium text-white">UTM метки</span>
            <span className="text-[11px] text-gray-500">
              {hasAnyParam ? 'Метки добавлены' : 'Отслеживание кампаний'}
            </span>
          </span>
        </span>
        <ChevronDown className={`h-4 w-4 text-gray-500 transition-transform duration-200 ${isOpen ? 'rotate-180 text-violet-300' : 'group-hover:text-gray-300'}`} />
      </button>

      <AnimatePresence initial={false}>
        {isOpen ? (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeOut' }}
            className="overflow-hidden"
          >
            <div className="space-y-4 border-t border-white/10 p-4">
              <div className="space-y-2.5">
                {UTM_FIELDS.map((field) => (
                  <div
                    key={field.key}
                    className="grid grid-cols-1 items-start gap-2 sm:grid-cols-[130px_1fr] sm:items-center sm:gap-3"
                  >
                    <label
                      htmlFor={`utm-${field.key}`}
                      className="font-mono text-xs text-gray-400"
                    >
                      {field.label}
                    </label>
                    <input
                      id={`utm-${field.key}`}
                      type="text"
                      value={utmParams[field.key] || ''}
                      onChange={(event) => handleFieldChange(field.key, event.target.value)}
                      placeholder={field.placeholder}
                      autoComplete="off"
                      spellCheck={false}
                      className="h-10 w-full rounded-lg border border-white/10 bg-black/40 px-3 text-sm text-gray-100 placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                    />
                  </div>
                ))}
              </div>

              <div className="flex flex-col gap-2 border-t border-white/10 pt-3 sm:flex-row sm:items-center sm:justify-between">
                <button
                  type="button"
                  onClick={handleClearAll}
                  disabled={!hasAnyParam}
                  className="inline-flex items-center gap-1.5 self-start rounded-md px-2 py-1 text-xs text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-gray-400"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                  Очистить все
                </button>

                {onSaveTemplate ? (
                  <button
                    type="button"
                    onClick={() => setShowSaveTemplate((prev) => !prev)}
                    disabled={!hasAnyParam}
                    className="inline-flex items-center gap-1.5 self-start rounded-md border border-violet-500/30 bg-violet-500/15 px-3 py-1.5 text-xs font-medium text-violet-100 transition-colors hover:bg-violet-500/25 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-violet-500/15"
                  >
                    <Save className="h-3.5 w-3.5" />
                    Сохранить как шаблон
                  </button>
                ) : null}
              </div>

              <AnimatePresence initial={false}>
                {showSaveTemplate && onSaveTemplate ? (
                  <motion.div
                    initial={{ opacity: 0, y: -4 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -4 }}
                    transition={{ duration: 0.15 }}
                    className="rounded-lg border border-violet-500/20 bg-violet-500/[0.08] p-3"
                  >
                    <label className="mb-1.5 block text-xs text-gray-300">Название шаблона</label>
                    <div className="flex flex-col gap-2 sm:flex-row">
                      <input
                        type="text"
                        value={templateName}
                        onChange={(event) => setTemplateName(event.target.value)}
                        placeholder="Например: Google Ads Кампания"
                        className="h-9 min-w-0 flex-1 rounded-md border border-white/10 bg-black/40 px-3 text-sm text-gray-100 placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                        autoFocus
                      />
                      <button
                        type="button"
                        onClick={handleSaveTemplate}
                        disabled={!templateName.trim()}
                        className="inline-flex h-9 items-center justify-center rounded-md bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 text-xs font-medium text-white transition-all hover:shadow-[0_0_20px_rgba(139,92,246,0.25)] disabled:cursor-not-allowed disabled:opacity-50"
                      >
                        Сохранить
                      </button>
                    </div>
                  </motion.div>
                ) : null}
              </AnimatePresence>

              {baseUrl ? (
                <div className="rounded-lg border border-white/10 bg-black/40 p-3">
                  <div className="mb-1.5 flex items-center justify-between">
                    <span className="text-[11px] uppercase tracking-wider text-gray-500">Предпросмотр URL</span>
                    {fullUrl ? (
                      <button
                        type="button"
                        onClick={handleCopyUrl}
                        className="inline-flex items-center gap-1 rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
                        title="Копировать URL"
                      >
                        {isCopied ? (
                          <>
                            <Check className="h-3 w-3 text-emerald-400" />
                            Скопировано
                          </>
                        ) : (
                          <>
                            <Copy className="h-3 w-3" />
                            Копировать
                          </>
                        )}
                      </button>
                    ) : null}
                  </div>
                  <code className="block break-all font-mono text-xs text-violet-200/90">
                    {fullUrl || 'Введите базовый URL'}
                  </code>
                </div>
              ) : null}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}