import React from 'react';
import { TrendingUp, Shield } from 'lucide-react';
import { useApp } from '../context/AppContext';

export const Footer: React.FC = () => {
  const {
    settings,
    texts,
    menuItems,
    developer,
    openDeveloperModal,
    openContentModal,
    openAdmin,
    t
  } = useApp();

  const authorName = texts.footer_author_name || developer.handle || '@jonathan_wilke';
  const authorUrl = texts.footer_author_url || developer.website_url || '';
  const sponsorText = texts.footer_sponsor_text || 'supastarter.dev';
  const sponsorUrl = texts.footer_sponsor_url || 'https://supastarter.dev';
  const domainName = texts.footer_domain_name || 'outbid.lol';
  const domainRating = texts.footer_domain_rating || '32';
  const domainLabel = texts.footer_domain_label || 'CERTIFIED DOMAIN RATING';
  const domainUrl = texts.footer_domain_url || '';
  const showRatingBadge = texts.footer_show_rating_badge !== false;

  const handleAuthorClick = (e: React.MouseEvent) => {
    if (authorUrl && authorUrl.startsWith('http')) {
      // If external link provided, standard navigation occurs
      return;
    }
    e.preventDefault();
    openDeveloperModal();
  };

  const handleDomainBadgeClick = (e: React.MouseEvent) => {
    if (domainUrl && domainUrl.startsWith('http')) {
      return;
    }
    e.preventDefault();
    openContentModal('stats');
  };

  const handleFooterItemClick = (item: any) => {
    const url = item.url || '';
    if (item.open_as === 'modal' || (item.description && !url.startsWith('http') && !url.startsWith('/'))) {
      openContentModal(item.id);
      return;
    }
    if (url.startsWith('#')) {
      const modalType = url.replace('#', '');
      openContentModal(modalType);
      return;
    }
    if (item.target === '_blank' || url.startsWith('http://') || url.startsWith('https://')) {
      window.open(url, item.target || '_blank');
      return;
    }
    if (url === '/') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    window.location.href = url;
  };

  const footerLinks = menuItems
    .filter(m => m.is_active && (m.location === 'footer' || m.location === 'both'))
    .sort((a, b) => a.display_order - b.display_order);

  return (
    <footer
      id="topbd-footer"
      className="border-t transition-colors mt-auto py-12 px-4"
      style={{
        backgroundColor: 'var(--footer-bg, #07090B)',
        borderColor: 'var(--border-color, #222A33)'
      }}
    >
      <div className="max-w-4xl mx-auto flex flex-col items-center justify-center text-center gap-3 text-sm">
        {/* Line 1: Attribution */}
        <div
          className="flex items-center justify-center gap-1.5 flex-wrap text-xs sm:text-sm"
          style={{ color: 'var(--footer-text-color, #A8A29E)' }}
        >
          <span>{t('built_by', undefined, 'Built by')}</span>
          {authorUrl && authorUrl.startsWith('http') ? (
            <a
              id="btn-footer-author"
              href={authorUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="hover:underline transition-opacity hover:opacity-80 font-medium cursor-pointer"
              style={{ color: 'var(--footer-link-color, #E07A5F)' }}
            >
              {authorName}
            </a>
          ) : (
            <button
              id="btn-footer-author"
              onClick={handleAuthorClick}
              className="hover:underline transition-opacity hover:opacity-80 font-medium cursor-pointer"
              style={{ color: 'var(--footer-link-color, #E07A5F)' }}
            >
              {authorName}
            </button>
          )}
          <span className="opacity-60">·</span>
          <span>{t('brought_to_you_by', undefined, 'Brought to you by')}</span>
          <a
            id="link-footer-sponsor"
            href={sponsorUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="hover:underline transition-opacity hover:opacity-80 font-medium cursor-pointer"
            style={{ color: 'var(--footer-link-color, #E07A5F)' }}
          >
            {sponsorText}
          </a>
        </div>

        {/* Line 2: Dynamic Footer Menu Links & Admin Button */}
        <div
          className="flex items-center justify-center gap-2 sm:gap-3 flex-wrap text-xs sm:text-sm font-medium"
          style={{ color: 'var(--footer-text-color, #A8A29E)' }}
        >
          {footerLinks.map((item, idx) => {
            const navKey = `nav_${item.title.toLowerCase().replace(/[^a-z0-9]/g, '_')}`;
            return (
              <React.Fragment key={item.id}>
                {idx > 0 && <span className="opacity-60">·</span>}
                <button
                  id={`btn-footer-nav-${item.id}`}
                  onClick={() => handleFooterItemClick(item)}
                  className="hover:underline transition-opacity hover:opacity-80 cursor-pointer"
                  style={{ color: 'var(--footer-link-color, #E07A5F)' }}
                  title={item.description || item.title}
                >
                  {t(navKey, undefined, item.title)}
                </button>
              </React.Fragment>
            );
          })}

          {settings.show_footer_admin_button !== false && (
            <>
              {footerLinks.length > 0 && <span className="opacity-60">·</span>}
              <button
                id="btn-footer-admin-panel"
                onClick={openAdmin}
                className="inline-flex items-center gap-1 hover:underline transition-opacity hover:opacity-80 cursor-pointer font-medium"
                style={{ color: 'var(--footer-link-color, #E07A5F)' }}
                title="Open Backend Admin Panel"
              >
                <Shield className="w-3.5 h-3.5" />
                <span>Admin Panel</span>
              </button>
            </>
          )}
        </div>

        {/* Line 3: Certified Domain Rating Pill Badge */}
        {showRatingBadge && (
          <div className="pt-2">
            {domainUrl && domainUrl.startsWith('http') ? (
              <a
                id="btn-footer-domain-rating"
                href={domainUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2.5 bg-white text-neutral-950 px-3.5 py-1.5 rounded-full shadow-md hover:shadow-lg hover:scale-105 active:scale-95 transition-all cursor-pointer select-none border border-neutral-200"
                title={`${domainLabel}: ${domainRating}`}
              >
                <div className="relative flex items-center justify-center w-7 h-7 shrink-0">
                  <svg viewBox="0 0 100 100" className="w-full h-full text-[#22C55E]" fill="currentColor">
                    <path d="M50 0 C54 0 57 7 61 8 C65 9 72 4 76 7 C80 10 81 18 84 22 C87 26 95 28 97 33 C99 38 95 45 95 50 C95 55 99 62 97 67 C95 72 87 74 84 78 C81 82 80 90 76 93 C72 96 65 91 61 92 C57 93 54 100 50 100 C46 100 43 93 39 92 C35 91 28 96 24 93 C20 90 19 82 16 78 C13 74 5 72 3 67 C1 62 5 55 5 50 C5 45 1 38 3 33 C5 28 13 26 16 22 C19 18 20 10 24 7 C28 4 35 9 39 8 C43 7 46 0 50 0 Z" />
                  </svg>
                  <span className="absolute text-[11px] font-black text-white font-mono leading-none">{domainRating}</span>
                </div>

                <div className="flex flex-col text-left">
                  <span className="font-extrabold text-[13px] sm:text-sm text-neutral-950 leading-tight tracking-tight">
                    {domainName}
                  </span>
                  <span className="text-[8px] sm:text-[9px] font-bold text-neutral-500 tracking-wider uppercase leading-tight">
                    {domainLabel}
                  </span>
                </div>

                <TrendingUp className="w-4 h-4 text-neutral-950 ml-1 shrink-0 stroke-[2.5]" />
              </a>
            ) : (
              <button
                id="btn-footer-domain-rating"
                onClick={handleDomainBadgeClick}
                className="inline-flex items-center gap-2.5 bg-white text-neutral-950 px-3.5 py-1.5 rounded-full shadow-md hover:shadow-lg hover:scale-105 active:scale-95 transition-all cursor-pointer select-none border border-neutral-200"
                title={`${domainLabel}: ${domainRating}`}
              >
                <div className="relative flex items-center justify-center w-7 h-7 shrink-0">
                  <svg viewBox="0 0 100 100" className="w-full h-full text-[#22C55E]" fill="currentColor">
                    <path d="M50 0 C54 0 57 7 61 8 C65 9 72 4 76 7 C80 10 81 18 84 22 C87 26 95 28 97 33 C99 38 95 45 95 50 C95 55 99 62 97 67 C95 72 87 74 84 78 C81 82 80 90 76 93 C72 96 65 91 61 92 C57 93 54 100 50 100 C46 100 43 93 39 92 C35 91 28 96 24 93 C20 90 19 82 16 78 C13 74 5 72 3 67 C1 62 5 55 5 50 C5 45 1 38 3 33 C5 28 13 26 16 22 C19 18 20 10 24 7 C28 4 35 9 39 8 C43 7 46 0 50 0 Z" />
                  </svg>
                  <span className="absolute text-[11px] font-black text-white font-mono leading-none">{domainRating}</span>
                </div>

                <div className="flex flex-col text-left">
                  <span className="font-extrabold text-[13px] sm:text-sm text-neutral-950 leading-tight tracking-tight">
                    {domainName}
                  </span>
                  <span className="text-[8px] sm:text-[9px] font-bold text-neutral-500 tracking-wider uppercase leading-tight">
                    {domainLabel}
                  </span>
                </div>

                <TrendingUp className="w-4 h-4 text-neutral-950 ml-1 shrink-0 stroke-[2.5]" />
              </button>
            )}
          </div>
        )}
      </div>
    </footer>
  );
};


