import { motion, AnimatePresence } from "motion/react";
import { Ticket, Copy, Check, ExternalLink, ChevronRight } from "lucide-react";
import { useState } from "react";

const sportsOffers = [
  {
    category: "Футбол",
    title: "ФК «Зенит»",
    subtitle: "Скидка до 20% на билеты",
    description: "Скидка 10% на матчи против «Спартака» и «Краснодара». На остальные матчи — 20%. До 5 билетов на аккаунт. Не распространяется на детские билеты.",
    promo: "RS-25WH26",
    link: "https://tickets.fc-zenit.ru/promo/",
    image: "https://images.unsplash.com/photo-1549923015-badf41b04831?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmb290YmFsbCUyMHN0YWRpdW0lMjBtYXRjaHxlbnwxfHx8fDE3NzM0MDAyMzV8MA&ixlib=rb-4.1.0&q=80&w=1080",
    badge: "Санкт-Петербург"
  },
  {
    category: "Футбол",
    title: "ФК «Динамо» — ФК «Зенит»",
    subtitle: "22 марта, 16:00 • ВТБ Арена",
    description: "Эксклюзивная скидка 50% на стандартные билеты и 30% на VIP с питанием. Внимание: для посещения матча требуется карта болельщика.",
    promo: "LMv3spFr",
    link: "https://tickets.fcdynamo.ru/",
    image: "https://images.unsplash.com/photo-1660462499851-0a6d9ba77a4b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmb290YmFsbCUyMHNvY2NlciUyMHN0YWRpdW0lMjBhcmVuYSUyMGJsdWV8ZW58MXx8fHwxNzczNDAwMjQ1fDA&ixlib=rb-4.1.0&q=80&w=1080",
    badge: "Москва"
  }
];

const theaterCategories = [
  {
    id: "mgt-april",
    title: "Апрель (МГТ)",
    link: "https://m-g-t.ru/",
    groups: [
      {
        promo: "СПОРТ10",
        discount: "-10%",
        shows: ["16.04, 17.04 — Лягушки. ПРЕМЬЕРА!", "19.04 — Ревизор. ПРЕМЬЕРА!", "24.04 — Двенадцатая ночь. ПРЕМЬЕРА!"]
      },
      {
        promo: "СПОРТ30",
        discount: "-30%",
        shows: ["07.04 — Литературная гостиная", "08.04 — Свадьба Кречинского", "10.04 — Серебряное зеркало", "11.04 — Высоцкий", "12.04 — Книга Джунглей", "15.04 — Вишневый сад", "16.04 — Дон Жуан", "18.04 — Капитанская дочка", "19.04 — Алиса в Стране Чудес", "22.04, 23.04 — Старший сын", "25.04 — Малыш и Карлсон", "26.04 — Остров сокровищ", "26.04 — Волшебная барабанная палочка", "28.04 — Семейная картина", "29.04 — Женитьба", "30.04 — Дама с собачкой"]
      },
      {
        promo: "СПОРТ50",
        discount: "-50%",
        shows: ["01.04 — Нашла коса на камень", "01.04 — Колыбельная для одуванчика", "05.04 — На всякого мудреца", "21.04 — Прекрасное далеко", "28.04 — Веселый солдат", "30.04 — Собака на сене"]
      }
    ]
  },
  {
    id: "mgt-march",
    title: "Март (МГТ)",
    link: "https://m-g-t.ru/",
    groups: [
      {
        promo: "СПОРТ30",
        discount: "-30%",
        shows: ["12.03 — Много шума из ничего", "14.03 — Золотой ключик", "18.03 — Дама с собачкой", "24.03 — Вишневый сад", "26.03, 27.03 — Дон Жуан"]
      },
      {
        promo: "СПОРТ50",
        discount: "-50%",
        shows: ["13.03 — Колыбельная для одуванчика", "15.03 — Книга Джунглей", "15.03 — Волшебная барабанная палочка", "18.03 — На всякого мудреца", "21.03 — Малыш и Карлсон", "29.03 — Алиса в Стране Чудес"]
      }
    ]
  },
  {
    id: "specials",
    title: "Спецпредложения",
    link: "https://m-g-t.ru/",
    groups: [
      {
        promo: "МАРТ",
        discount: "1000 ₽",
        description: "Фиксированная цена на билеты",
        shows: ["14.03 — Собака на сене", "19.03 — Чужие берега", "24.03 — Сердце матери", "31.03 — Без вины виноватые"]
      },
      {
        promo: "8МАРТА",
        discount: "-50%",
        description: "Скидка в честь 8 марта",
        shows: ["11.03 — Высоцкий", "14.03 — Колыбельная", "14.03 — Золотой ключик (детям)", "15.03 — Книга Джунглей (детям)", "15.03 — Волшебная палочка (детям)", "18.03 — Дама с собачкой", "19.03 — Чужие берега", "24.03 — Вишневый сад", "26.03, 27.03 — Дон Жуан", "29.03 — Алиса в Стране Чудес (детям)"]
      },
      {
        promo: "СПОРТ10",
        discount: "-10%",
        description: "24.06 — Волгоградский проспект, 121",
        shows: ["24.06 (19:00) — Дядя Ваня (с С.В. Безруковым)"]
      }
    ]
  },
  {
    id: "bezrukov",
    title: "Фонд С. Безрукова",
    link: "https://m-g-t.ru/",
    groups: [
      {
        promo: "МАСКА21",
        discount: "Скидка",
        shows: ["20.03, 18.04 — Мой Онегин", "29.03, 19.04 — Неугомонный дух", "25.03, 22.04 — Мой Лермонтов"]
      },
      {
        promo: "МАСКА15",
        discount: "Скидка",
        shows: ["02.04 — Хулиган. Исповедь", "24.04 — Казанова. Искусство жить"]
      }
    ]
  }
];

export function TicketOffers() {
  const [copiedPromo, setCopiedPromo] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState(theaterCategories[0].id);

  const activeCategory = theaterCategories.find(c => c.id === activeTab);

  const handleCopy = (promo: string) => {
    const textArea = document.createElement("textarea");
    textArea.value = promo;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    textArea.style.top = "-999999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
      document.execCommand('copy');
      setCopiedPromo(promo);
      setTimeout(() => setCopiedPromo(null), 2000);
    } catch (error) {
      console.error('Copy failed', error);
    } finally {
      textArea.remove();
    }
  };

  return (
    <section id="tickets" className="py-24 bg-[#FBFBFD] border-t border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100/50 text-blue-600 text-sm font-medium mb-6"
          >
            <Ticket className="w-4 h-4" />
            Специальные предложения
          </motion.div>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-4"
          >
            Спортивная и театральная афиша
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-xl text-gray-500 font-light"
          >
            Эксклюзивные скидки на лучшие мероприятия. Копируйте промокоды, приобретайте билеты со скидкой до 50% и наслаждайтесь эмоциями.
          </motion.p>
        </div>

        {/* Sports Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
          {sportsOffers.map((offer, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="group bg-white rounded-[2rem] overflow-hidden border border-gray-100/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col sm:flex-row h-auto sm:h-[300px]"
            >
              <div className="sm:w-2/5 relative h-64 sm:h-full overflow-hidden shrink-0">
                <div className="absolute top-4 left-4 z-10 px-3 py-1 bg-white/90 backdrop-blur-md rounded-full text-xs font-semibold text-gray-900 shadow-sm">
                  {offer.badge}
                </div>
                <img 
                  src={offer.image} 
                  alt={offer.title} 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
                />
              </div>
              
              <div className="p-8 sm:w-3/5 flex flex-col h-full bg-white relative z-10">
                <div className="flex items-center gap-2 mb-3">
                  <span className="text-xs font-bold tracking-widest uppercase text-blue-600">
                    {offer.category}
                  </span>
                </div>
                
                <h3 className="text-2xl font-bold text-gray-900 mb-1 leading-tight">
                  {offer.title}
                </h3>
                <p className="text-sm font-medium text-gray-900 mb-3">
                  {offer.subtitle}
                </p>
                <p className="text-sm text-gray-500 line-clamp-3 mb-6 font-light">
                  {offer.description}
                </p>
                
                <div className="mt-auto flex items-center justify-between gap-4">
                  <button 
                    onClick={() => handleCopy(offer.promo)}
                    className="flex-1 flex items-center justify-center gap-2 bg-gray-50 hover:bg-gray-100 text-gray-900 px-4 py-3 rounded-xl text-sm font-medium transition-colors border border-gray-200/50"
                  >
                    {copiedPromo === offer.promo ? (
                      <>
                        <Check className="w-4 h-4 text-green-500" />
                        <span className="text-green-600 truncate">Скопировано</span>
                      </>
                    ) : (
                      <>
                        <Copy className="w-4 h-4 text-gray-500" />
                        <span className="truncate">{offer.promo}</span>
                      </>
                    )}
                  </button>
                  
                  <a 
                    href={offer.link} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="flex items-center justify-center w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors shrink-0 shadow-sm"
                    title="Перейти к покупке"
                  >
                    <ExternalLink className="w-5 h-5" />
                  </a>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Theater Billboard Section */}
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="bg-white rounded-[2.5rem] p-6 sm:p-10 border border-gray-100 shadow-sm"
        >
          <div className="flex flex-col lg:flex-row items-start justify-between mb-8 gap-6">
            <div className="max-w-2xl">
              <h3 className="text-3xl font-bold text-gray-900 mb-3">Театральная афиша</h3>
              <p className="text-gray-500 font-light text-lg">
                Масштабная программа скидок на спектакли Московского Губернского театра и Фонда С. Безрукова. Выберите месяц, скопируйте нужный промокод и приобретайте билеты.
              </p>
            </div>
          </div>

          {/* Segmented Control */}
          <div className="flex overflow-x-auto pb-6 -mx-6 px-6 sm:mx-0 sm:px-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
            <div className="inline-flex bg-gray-100/80 p-1.5 rounded-2xl">
              {theaterCategories.map((cat) => (
                <button
                  key={cat.id}
                  onClick={() => setActiveTab(cat.id)}
                  className={`px-6 py-2.5 rounded-xl text-sm font-medium transition-all whitespace-nowrap ${
                    activeTab === cat.id 
                      ? "bg-white text-gray-900 shadow-sm" 
                      : "text-gray-500 hover:text-gray-900"
                  }`}
                >
                  {cat.title}
                </button>
              ))}
            </div>
          </div>

          {/* Tab Content */}
          <div className="mt-2">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeTab}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
              >
                {activeCategory?.groups.map((group, idx) => (
                  <div key={idx} className="bg-gray-50/50 rounded-3xl p-6 border border-gray-100 flex flex-col h-full hover:shadow-md transition-shadow">
                    <div className="flex items-center justify-between mb-6">
                      <div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-100/60 text-blue-700 rounded-xl font-bold">
                        <span className="text-lg tracking-tight">{group.discount}</span>
                      </div>
                      <button
                        onClick={() => handleCopy(group.promo)}
                        className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors bg-white border border-gray-200 shadow-sm px-3 py-2 rounded-xl active:scale-95"
                      >
                        {copiedPromo === group.promo ? (
                          <><Check className="w-4 h-4 text-green-500" /><span className="text-green-600">Скопировано</span></>
                        ) : (
                          <><Copy className="w-4 h-4 text-gray-400" /><span>{group.promo}</span></>
                        )}
                      </button>
                    </div>
                    
                    {group.description && (
                      <p className="text-sm text-gray-600 mb-5 font-medium bg-white px-3.5 py-2.5 rounded-xl border border-gray-200/60 shadow-sm">{group.description}</p>
                    )}
                    
                    <div className="space-y-4 flex-grow">
                      {group.shows.map((show, sIdx) => {
                        const [date, ...rest] = show.split(' — ');
                        const name = rest.join(' — ');
                        
                        return (
                          <div key={sIdx} className="flex gap-3 text-sm">
                            <span className="font-semibold text-gray-900 shrink-0 mt-0.5 w-14">
                              {date}
                            </span>
                            <span className="text-gray-600 font-light leading-snug">
                              {name || show}
                            </span>
                          </div>
                        );
                      })}
                    </div>

                    <div className="mt-8 pt-5 border-t border-gray-200/50">
                      <a 
                        href={activeCategory.link} 
                        target="_blank" 
                        rel="noopener noreferrer" 
                        className="inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors group/link"
                      >
                        Выбрать билеты 
                        <ChevronRight className="w-4 h-4 group-hover/link:translate-x-0.5 transition-transform" />
                      </a>
                    </div>
                  </div>
                ))}
              </motion.div>
            </AnimatePresence>
          </div>
        </motion.div>

      </div>
    </section>
  );
}