'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { Bookmark, Check, ChevronDown, Loader2, Trash2, X } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import Modal from './Modal';
import { useToast } from './ToastProvider';
import { getResponseErrorTextWithRequestId } from '@/lib/api-client';

interface Template {
  id: string;
  name: string;
  utmSource?: string;
  utmMedium?: string;
  utmCampaign?: string;
  utmTerm?: string;
  utmContent?: string;
}

interface TemplateSelectorProps {
  onSelect: (template: Template) => void;
  onDelete?: (templateId: string) => void;
  refreshToken?: number;
}

export default function TemplateSelector({ onSelect, onDelete, refreshToken = 0 }: TemplateSelectorProps) {
  const toast = useToast();
  const [templates, setTemplates] = useState<Template[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedId, setSelectedId] = useState<string>('');
  const [isOpen, setIsOpen] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [templateToDelete, setTemplateToDelete] = useState<string | null>(null);
  const rootRef = useRef<HTMLDivElement | null>(null);

  const fetchTemplates = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/templates');
      if (!response.ok) {
        throw new Error(await getResponseErrorTextWithRequestId(response, 'Не удалось загрузить шаблоны'));
      }
      const data = await response.json();
      setTemplates(data.templates || []);
    } catch (error) {
      console.error('Error fetching templates:', error);
      const message = error instanceof Error ? error.message : 'Не удалось загрузить шаблоны';
      toast.error(message);
    } finally {
      setIsLoading(false);
    }
  }, [toast]);

  useEffect(() => {
    void fetchTemplates();
  }, [fetchTemplates]);

  useEffect(() => {
    if (refreshToken > 0) {
      void fetchTemplates();
    }
  }, [refreshToken, fetchTemplates]);

  // Закрытие дропдауна по клику снаружи и Esc.
  useEffect(() => {
    if (!isOpen) return;
    const handleClick = (event: MouseEvent) => {
      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    const handleKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setIsOpen(false);
    };
    window.addEventListener('mousedown', handleClick);
    window.addEventListener('keydown', handleKey);
    return () => {
      window.removeEventListener('mousedown', handleClick);
      window.removeEventListener('keydown', handleKey);
    };
  }, [isOpen]);

  const handleSelect = (templateId: string) => {
    setSelectedId(templateId);
    const template = templates.find((item) => item.id === templateId);
    if (template) {
      onSelect(template);
    }
    setIsOpen(false);
  };

  const handleReset = () => {
    setSelectedId('');
    onSelect({
      id: '',
      name: '',
      utmSource: '',
      utmMedium: '',
      utmCampaign: '',
      utmTerm: '',
      utmContent: '',
    });
  };

  const handleAskDelete = (event: React.MouseEvent, templateId: string) => {
    event.stopPropagation();
    setTemplateToDelete(templateId);
    setShowDeleteModal(true);
  };

  const confirmDelete = async () => {
    if (!templateToDelete) return;

    try {
      const response = await fetch(`/api/templates?id=${templateToDelete}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        setTemplates((prev) => prev.filter((item) => item.id !== templateToDelete));
        onDelete?.(templateToDelete);
        if (selectedId === templateToDelete) {
          setSelectedId('');
        }
        setShowDeleteModal(false);
        setTemplateToDelete(null);
        toast.success('Шаблон удалён');
      } else {
        toast.error(await getResponseErrorTextWithRequestId(response, 'Не удалось удалить шаблон'));
      }
    } catch (error) {
      console.error('Error deleting template:', error);
      toast.error('Не удалось удалить шаблон');
      setShowDeleteModal(false);
      setTemplateToDelete(null);
    }
  };

  const selectedTemplate = templates.find((item) => item.id === selectedId);

  if (isLoading && templates.length === 0) {
    return (
      <div className="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.02] px-3 py-2 text-xs text-gray-400">
        <Loader2 className="h-3.5 w-3.5 animate-spin text-violet-300" />
        Загрузка шаблонов...
      </div>
    );
  }

  if (templates.length === 0) {
    return null;
  }

  return (
    <div className="relative" ref={rootRef}>
      <div className="mb-1.5 flex items-center justify-between">
        <label className="text-xs font-medium text-gray-400">Сохранённые шаблоны UTM</label>
        {isLoading ? (
          <span className="inline-flex items-center gap-1 text-[11px] text-gray-500">
            <Loader2 className="h-3 w-3 animate-spin" />
            Обновление
          </span>
        ) : null}
      </div>

      <div className="flex min-w-0 items-center gap-2">
        <button
          type="button"
          onClick={() => setIsOpen((prev) => !prev)}
          className={`group flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
            isOpen || selectedTemplate
              ? 'border-white/10 bg-white/[0.08] text-white'
              : 'border-white/10 bg-black/40 text-gray-300 hover:border-white/20 hover:bg-white/[0.05] hover:text-white'
          }`}
        >
          <span className="flex min-w-0 items-center gap-2">
            <span className={`inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border transition-colors ${
              selectedTemplate
                ? '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'
            }`}>
              <Bookmark className="h-3.5 w-3.5" />
            </span>
            <span className="truncate">
              {selectedTemplate ? selectedTemplate.name : 'Выберите шаблон…'}
            </span>
          </span>
          <ChevronDown
            className={`h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200 ${
              isOpen ? 'rotate-180 text-violet-300' : ''
            }`}
          />
        </button>

        {selectedId ? (
          <button
            type="button"
            onClick={handleReset}
            className="inline-flex h-9 shrink-0 items-center gap-1 rounded-md border border-white/10 bg-white/5 px-3 text-xs font-medium text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
            title="Снять выбор шаблона"
          >
            <X className="h-3.5 w-3.5" />
            Снять
          </button>
        ) : null}

        {selectedId ? (
          <button
            type="button"
            onClick={(event) => handleAskDelete(event, selectedId)}
            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-red-500/20 bg-red-500/10 text-red-300 transition-colors hover:bg-red-500/20 hover:text-red-200"
            title="Удалить шаблон"
          >
            <Trash2 className="h-4 w-4" />
          </button>
        ) : null}
      </div>

      <AnimatePresence>
        {isOpen ? (
          <motion.div
            initial={{ opacity: 0, y: -4, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -4, scale: 0.98 }}
            transition={{ duration: 0.15, ease: 'easeOut' }}
            className="absolute left-0 right-0 z-30 mt-2 overflow-hidden rounded-xl border border-white/10 bg-[#0A0A0A]/95 shadow-[0_12px_40px_rgba(0,0,0,0.75)] backdrop-blur-xl"
          >
            <div className="max-h-72 overflow-y-auto py-1">
              {templates.map((template) => {
                const isActive = selectedId === template.id;
                return (
                  <button
                    key={template.id}
                    type="button"
                    onClick={() => handleSelect(template.id)}
                    className={`group flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm transition-colors ${
                      isActive
                        ? 'bg-violet-500/10 text-violet-100'
                        : 'text-gray-300 hover:bg-white/[0.05] hover:text-white'
                    }`}
                  >
                    <span className="flex min-w-0 items-center gap-2">
                      <Bookmark
                        className={`h-3.5 w-3.5 shrink-0 ${
                          isActive ? 'text-violet-300' : 'text-gray-500 group-hover:text-violet-300'
                        }`}
                      />
                      <span className="truncate">{template.name}</span>
                    </span>
                    <span className="inline-flex shrink-0 items-center gap-1">
                      {isActive ? <Check className="h-4 w-4 text-violet-300" /> : null}
                      <span
                        role="button"
                        tabIndex={-1}
                        onClick={(event) => handleAskDelete(event, template.id)}
                        className="inline-flex h-6 w-6 items-center justify-center rounded-md text-gray-500 opacity-0 transition-all hover:bg-red-500/15 hover:text-red-300 group-hover:opacity-100 focus-visible:opacity-100"
                        title="Удалить шаблон"
                      >
                        <Trash2 className="h-3 w-3" />
                      </span>
                    </span>
                  </button>
                );
              })}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>

      <Modal
        isOpen={showDeleteModal}
        onClose={() => {
          setShowDeleteModal(false);
          setTemplateToDelete(null);
        }}
        onConfirm={confirmDelete}
        title="Удалить шаблон?"
        description="Вы уверены, что хотите удалить этот шаблон? Это действие нельзя отменить."
        confirmText="Удалить"
        cancelText="Отмена"
        variant="danger"
      />
    </div>
  );
}