'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import {
  CalendarDays,
  CheckCircle2,
  FolderOpen,
  Lock,
  Share2,
  ShieldCheck,
  Tags,
  Zap,
} from 'lucide-react';

type OrgFolder = 'telegram' | 'mail' | 'influencers';

const orgData: Record<OrgFolder, Array<{ name: string; clicks: string; dotClass: string }>> = {
  telegram: [
    { name: 'promo_april', clicks: '142 клика', dotClass: 'bg-blue-400 text-blue-400' },
    { name: 'tech_blog_ad', clicks: '89 кликов', dotClass: 'bg-fuchsia-400 text-fuchsia-400' },
  ],
  mail: [
    { name: 'digest_q1', clicks: '4 102 клика', dotClass: 'bg-violet-400 text-violet-400' },
    { name: 'welcome_series', clicks: '820 кликов', dotClass: 'bg-cyan-400 text-cyan-400' },
  ],
  influencers: [
    { name: 'wylsacom_yt', clicks: '12 400 кликов', dotClass: 'bg-green-400 text-green-400' },
    { name: 'tg_durov', clicks: '8 400 кликов', dotClass: 'bg-pink-400 text-pink-400' },
  ],
};

function cn(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(' ');
}

function FolderItems({ items }: { items: Array<{ name: string; clicks: string; dotClass: string }> }) {
  return (
    <div className="ml-6 mt-2 mb-3 flex flex-col gap-2.5 border-l-2 border-white/5 pl-4 py-2 relative">
      <div className="absolute top-4 left-[-1px] w-2.5 h-[2px] bg-white/5" />
      <div className="absolute top-[2.75rem] left-[-1px] w-2.5 h-[2px] bg-white/5" />

      {items.map((item) => (
        <div
          key={item.name}
          className="flex items-center justify-between text-xs text-gray-400 hover:text-white transition w-full group/item cursor-pointer"
        >
          <div className="flex items-center gap-2.5">
            <div className={cn('w-2 h-2 rounded-full shadow-[0_0_8px_currentColor]', item.dotClass)} />
            {item.name}
          </div>
          <span className="bg-white/5 px-2 py-1 rounded text-white group-hover/item:bg-white/10 transition">
            {item.clicks}
          </span>
        </div>
      ))}
    </div>
  );
}

export default function FeaturesSection() {
  const [activeOrgFolder, setActiveOrgFolder] = useState<OrgFolder>('telegram');

  return (
    <section
      id="features"
      className="px-6 lg:px-12 w-full max-w-7xl mx-auto pt-24 pb-12 border-t border-white/5 relative z-10"
    >
      <div className="absolute top-0 inset-x-0 mx-auto w-1/2 h-px bg-gradient-to-r from-transparent via-violet-500/50 to-transparent" />

      <div className="mb-16">
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-3xl md:text-5xl font-bold tracking-tight mb-4"
        >
          Больше, чем сокращатель.
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="text-gray-400 text-lg max-w-2xl"
        >
          Настройте идеальный рабочий процесс: структурируйте ссылки, улучшайте SEO-мета-теги и делитесь
          результатами.
        </motion.p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2 p-8 md:p-10 rounded-[2rem] relative overflow-hidden group flex flex-col lg:flex-row gap-10 items-center border border-white/5 bg-white/[0.03] backdrop-blur-xl">
          <div className="flex-1 z-10 relative">
            <div className="bg-gradient-to-b from-white/10 to-transparent w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-inner ring-1 ring-white/10">
              <FolderOpen className="w-7 h-7 text-white" />
            </div>
            <h3 className="text-2xl md:text-3xl font-bold mb-4">Организация и структура</h3>
            <p className="text-gray-400 mb-8 text-lg leading-relaxed">
              Создавайте папки для проектов, добавляйте теги для визуального поиска и применяйте массовые действия.
            </p>
            <ul className="space-y-4 text-sm text-gray-400">
              <li className="flex items-center gap-3">
                <CheckCircle2 className="w-5 h-5 text-violet-400 shrink-0" />
                <span className="text-white">Поиск и фильтры</span> - по папкам, тегам и статусу
              </li>
              <li className="flex items-center gap-3">
                <CheckCircle2 className="w-5 h-5 text-[#2AABEE] shrink-0" />
                <span className="text-white">Вложенные папки</span> - любая глубина структуры
              </li>
              <li className="flex items-center gap-3">
                <CheckCircle2 className="w-5 h-5 text-fuchsia-400 shrink-0" />
                <span className="text-white">Теги и избранное</span> - быстрый доступ к важному
              </li>
            </ul>
          </div>

          <div className="flex-1 w-full bg-black/40 border border-white/10 rounded-2xl p-5 flex flex-col gap-1 z-10 mx-auto max-w-[340px] lg:max-w-none shadow-2xl relative backdrop-blur-xl">
            <div className="absolute inset-0 bg-gradient-to-br from-violet-500/5 to-transparent rounded-2xl pointer-events-none" />

            <button
              type="button"
              onClick={() => setActiveOrgFolder('telegram')}
              className={cn(
                'flex items-center gap-3 p-3 rounded-xl text-sm font-medium transition-colors cursor-pointer text-left',
                activeOrgFolder === 'telegram'
                  ? 'bg-white/[0.08] text-white border border-white/5 shadow-sm'
                  : 'hover:bg-white/[0.04] text-gray-400',
              )}
            >
              <FolderOpen className={cn('w-4 h-4', activeOrgFolder === 'telegram' && 'text-violet-400')} />
              Telegram реклама
            </button>

            {activeOrgFolder === 'telegram' && (
              <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} className="overflow-hidden">
                <FolderItems items={orgData.telegram} />
              </motion.div>
            )}

            <button
              type="button"
              onClick={() => setActiveOrgFolder('mail')}
              className={cn(
                'flex items-center gap-3 p-3 rounded-xl text-sm font-medium transition-colors cursor-pointer text-left',
                activeOrgFolder === 'mail'
                  ? 'bg-white/[0.08] text-white border border-white/5 shadow-sm'
                  : 'hover:bg-white/[0.04] text-gray-400',
              )}
            >
              <FolderOpen className={cn('w-4 h-4', activeOrgFolder === 'mail' && 'text-violet-400')} />
              Рассылки
            </button>

            {activeOrgFolder === 'mail' && (
              <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} className="overflow-hidden">
                <FolderItems items={orgData.mail} />
              </motion.div>
            )}

            <button
              type="button"
              onClick={() => setActiveOrgFolder('influencers')}
              className={cn(
                'flex items-center gap-3 p-3 rounded-xl text-sm font-medium transition-colors cursor-pointer text-left',
                activeOrgFolder === 'influencers'
                  ? 'bg-white/[0.08] text-white border border-white/5 shadow-sm'
                  : 'hover:bg-white/[0.04] text-gray-400',
              )}
            >
              <FolderOpen className={cn('w-4 h-4', activeOrgFolder === 'influencers' && 'text-violet-400')} />
              Influencers
            </button>

            {activeOrgFolder === 'influencers' && (
              <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} className="overflow-hidden">
                <FolderItems items={orgData.influencers} />
              </motion.div>
            )}

            <div className="mt-5 pt-5 border-t border-white/10 flex gap-2 w-full flex-wrap">
              <span className="px-2.5 py-1.5 bg-[#2AABEE]/10 rounded-lg flex items-center gap-1.5 hover:bg-[#2AABEE]/20 transition cursor-pointer text-[#2AABEE] text-xs font-medium">
                <Tags className="w-3.5 h-3.5" /> #b2b
              </span>
              <span className="px-2.5 py-1.5 bg-fuchsia-500/10 rounded-lg flex items-center gap-1.5 hover:bg-fuchsia-500/20 transition cursor-pointer text-fuchsia-400 text-xs font-medium">
                <Tags className="w-3.5 h-3.5" /> #sale
              </span>
            </div>
          </div>
        </div>

        <div className="p-8 rounded-3xl flex flex-col justify-between border border-white/5 bg-white/[0.03] backdrop-blur-xl">
          <div>
            <Share2 className="w-8 h-8 text-blue-400 mb-6" />
            <h3 className="text-xl font-bold mb-3">Маркетинг и OG-данные</h3>
            <p className="text-gray-400 text-sm">
              Ручное редактирование OG-данных: меняйте заголовок, описание и картинку, которые увидят в соцсетях.
            </p>
          </div>
          <div className="mt-8">
            <div className="bg-white/5 border border-white/10 rounded-xl p-3 flex flex-col gap-2">
              <div className="h-20 rounded-lg w-full relative overflow-hidden bg-gradient-to-br from-violet-600/30 via-fuchsia-500/20 to-blue-500/30 flex items-center justify-center">
                <span className="text-xs font-bold text-white">Custom Image</span>
              </div>
              <div className="h-3 w-3/4 bg-white/20 rounded" />
              <div className="h-2 w-1/2 bg-white/10 rounded" />
            </div>
          </div>
        </div>

        <div className="p-8 rounded-3xl border border-white/5 bg-white/[0.03] backdrop-blur-xl">
          <ShieldCheck className="w-8 h-8 text-green-400 mb-6" />
          <h3 className="text-xl font-bold mb-3">Детальный контроль</h3>
          <p className="text-gray-400 text-sm mb-6">
            Защита ссылок паролем, установка лимита переходов и точного срока окончания действия ссылки.
          </p>
          <div className="flex flex-col gap-2">
            <div className="bg-black/40 border border-white/5 rounded-xl p-3 flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm text-gray-300">
                <Lock className="w-4 h-4 text-green-400" /> Пароль
              </div>
              <span className="text-xs bg-white/10 px-2 py-1 rounded">Вкл</span>
            </div>
            <div className="bg-black/40 border border-white/5 rounded-xl p-3 flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm text-gray-300">
                <CalendarDays className="w-4 h-4 text-yellow-400" /> Истекает
              </div>
              <span className="text-xs font-mono text-gray-500">22.10.2026</span>
            </div>
          </div>
        </div>

        <div className="md:col-span-2 p-8 rounded-3xl relative overflow-hidden border border-white/5 bg-white/[0.03] backdrop-blur-xl">
          <div className="flex flex-col md:flex-row gap-8 justify-between h-full items-center">
            <div className="max-w-xs">
              <Zap className="w-8 h-8 text-fuchsia-400 mb-6" />
              <h3 className="text-2xl font-bold mb-3">UTM-конструктор</h3>
              <p className="text-gray-400 mb-6">
                Создавайте шаблоны UTM-меток прямо в дашборде. Автоматическое добавление source, medium и campaign.
              </p>
              <div className="flex gap-2">
                <span className="text-xs px-2 py-1 bg-violet-500/20 text-violet-300 rounded-md">TelegramAds</span>
                <span className="text-xs px-2 py-1 bg-blue-500/20 text-blue-300 rounded-md">EmailPromo</span>
              </div>
            </div>

            <div className="flex-1 w-full bg-black/40 border border-white/5 rounded-xl p-4 font-mono text-sm flex flex-col gap-3">
              <div className="flex justify-between items-center p-2 rounded-lg bg-white/5 overflow-hidden">
                <span className="text-gray-500 shrink-0">?utm_source=</span>
                <span className="text-violet-400 truncate ml-2">telegram</span>
              </div>
              <div className="flex justify-between items-center p-2 rounded-lg bg-white/5 overflow-hidden">
                <span className="text-gray-500 shrink-0">?utm_medium=</span>
                <span className="text-blue-400 truncate ml-2">channel_post</span>
              </div>
              <div className="flex justify-between items-center p-2 rounded-lg bg-white/5 overflow-hidden">
                <span className="text-gray-500 shrink-0">?utm_campaign=</span>
                <span className="text-fuchsia-400 truncate ml-2">spring_sale_2026</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}