'use client';

import Link from 'next/link';
import { ArrowRight, Mail, Send, Zap } from 'lucide-react';
import { config } from '@/lib/config';
import { getRuntimeClientConfig } from '@/lib/runtime-client-config';

type FooterProps = {
  onOpenLogin?: (targetReturnTo?: string) => void;
  isAuthenticated?: boolean;
};

function LinkIcon() {
  return (
    <svg className="h-3 w-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
    </svg>
  );
}

export default function Footer({ onOpenLogin, isAuthenticated = false }: FooterProps) {
  const runtimeConfig = getRuntimeClientConfig();
  const projectName = runtimeConfig.projectName || config.projectName;
  const supportTelegramUsername = runtimeConfig.supportTelegramUsername?.trim() || '';
  const supportEmail = runtimeConfig.supportEmail?.trim() || '';
  // Telegram приоритетнее почты; если ничего не задано — колонка не рендерится.
  const hasSupportContact = Boolean(supportTelegramUsername) || Boolean(supportEmail);
  const gridColsClass = hasSupportContact
    ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-5'
    : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4';

  return (
    <footer id="footer" className="relative z-10 border-t border-white/5 py-12 px-6 lg:px-12 bg-black">
      <div className={`w-full max-w-7xl mx-auto grid ${gridColsClass} gap-12 text-center text-sm md:text-left`}>
        <div className="md:col-span-1">
          <div className="mb-4 flex items-center justify-center gap-2 md:justify-start">
            <div className="w-6 h-6 rounded-md bg-gradient-to-br from-violet-500 to-blue-600 flex items-center justify-center">
              <LinkIcon />
            </div>
            <span className="font-bold tracking-tight text-white">{projectName}</span>
          </div>
          <p className="mx-auto mb-6 max-w-xs text-gray-500 md:mx-0">
            Умная платформа управления ссылками. Аналитика, структура и рост вашей аудитории в одном месте.
          </p>
        </div>

        <div className="space-y-4">
          <h4 className="font-semibold text-gray-300">Продукт</h4>
          <ul className="space-y-3 text-gray-500">
            <li><a href="#hero" className="hover:text-white transition-colors">Главная</a></li>
            <li><a href="#features" className="hover:text-white transition-colors">Возможности</a></li>
            <li><a href="#analytics" className="hover:text-white transition-colors">Аналитика</a></li>
            <li><a href="#pricing" className="hover:text-white transition-colors">Тарифы</a></li>
          </ul>
        </div>

        <div className="space-y-4">
          <h4 className="font-semibold text-gray-300">Кабинет</h4>
          <ul className="space-y-3 text-gray-500">
            <li>
              {onOpenLogin ? (
                <button
                  type="button"
                  onClick={() => onOpenLogin('/profile')}
                  className="mx-auto flex items-center gap-2 text-center transition-colors hover:text-violet-400 md:mx-0 md:text-left"
                >
                  Личный кабинет <ArrowRight className="w-3 h-3" />
                </button>
              ) : (
                <Link href="/profile" className="mx-auto flex items-center gap-2 text-center transition-colors hover:text-violet-400 md:mx-0 md:text-left">
                  Личный кабинет <ArrowRight className="w-3 h-3" />
                </Link>
              )}
            </li>
            <li>
              {onOpenLogin ? (
                <button
                  type="button"
                  onClick={() => onOpenLogin('/profile/pricing')}
                  className="text-center transition-colors hover:text-white md:text-left"
                >
                  Управление тарифом
                </button>
              ) : (
                <Link href="/profile/pricing" className="hover:text-white transition-colors">Управление тарифом</Link>
              )}
            </li>
          </ul>
        </div>

        <div className="space-y-4">
          <h4 className="font-semibold text-gray-300">Telegram</h4>
          <ul className="space-y-3 text-gray-500">
            <li>
              {onOpenLogin ? (
                <button
                  type="button"
                  onClick={() => onOpenLogin(isAuthenticated ? '/profile' : undefined)}
                  className="text-center transition-colors hover:text-white md:text-left"
                >
                  {isAuthenticated ? 'Панель' : 'Войти через Telegram'}
                </button>
              ) : (
                <Link href="/profile" className="hover:text-white transition-colors">Панель</Link>
              )}
            </li>
            <li><a href="#pricing" className="hover:text-white transition-colors">Выбрать тариф</a></li>
          </ul>
        </div>

        {hasSupportContact ? (
          <div className="space-y-4">
            <h4 className="font-semibold text-gray-300">Поддержка</h4>
            <ul className="space-y-3 text-gray-500">
              {supportTelegramUsername ? (
                <li>
                  <a
                    href={`https://t.me/${supportTelegramUsername}`}
                    target="_blank"
                    rel="noreferrer"
                    className="group inline-flex items-center justify-center gap-2 transition-colors hover:text-[#2AABEE] md:justify-start"
                  >
                    <span className="flex h-6 w-6 items-center justify-center rounded-md border border-[#2AABEE]/25 bg-[#2AABEE]/10 text-[#2AABEE] transition-colors group-hover:border-[#2AABEE]/50">
                      <Send className="h-3 w-3" />
                    </span>
                    <span>Телеграм</span>
                  </a>
                </li>
              ) : (
                <li>
                  <a
                    href={`mailto:${supportEmail}`}
                    className="group inline-flex items-center justify-center gap-2 transition-colors hover:text-violet-300 md:justify-start"
                  >
                    <span className="flex h-6 w-6 items-center justify-center rounded-md border border-violet-500/20 bg-violet-500/10 text-violet-300 transition-colors group-hover:border-violet-500/40">
                      <Mail className="h-3 w-3" />
                    </span>
                    <span>Почта</span>
                  </a>
                </li>
              )}
            </ul>
          </div>
        ) : null}
      </div>

      <div className="w-full max-w-7xl mx-auto mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between text-center md:text-left text-gray-600 text-xs font-mono gap-4">
        <p>© {new Date().getFullYear()} {projectName}. Все права защищены.</p>
        <div className="flex flex-wrap items-center justify-center gap-3 text-center md:justify-end md:gap-4">
          <Link href="/legal/privacy" className="hover:text-gray-300 transition-colors">Конфиденциальность</Link>
          <span className="text-gray-700">·</span>
          <Link href="/legal/terms" className="hover:text-gray-300 transition-colors">Соглашение</Link>
          <span className="text-gray-700">·</span>
          <span className="inline-flex basis-full items-center justify-center gap-1.5 sm:basis-auto"><Zap className="w-3 h-3 text-fuchsia-500" /> Быстрый запуск и аналитика</span>
        </div>
      </div>
    </footer>
  );
}
