import { useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useFadeInRef } from '../../hooks/useFadeIn';
import HexCanvas from './HexCanvas';
import BottomIllustration from './BottomIllustration';
import { TickerValue } from '../ui/TickerValue';
import { LogoIcon } from '../ui/icons/LogoIcon';
import { trackEvent } from '../../lib/analytics';

export default function HomePage({
  onOpenDashboard,
  onOpenPricing: _onOpenPricing,
  theme = 'light',
  hidePricing: _hidePricing,
}: {
  onOpenDashboard: () => void;
  onOpenPricing: () => void;
  theme?: 'light' | 'dark';
  hidePricing?: boolean;
}) {
  const { t } = useTranslation();
  const [statsActive, setStatsActive] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => setStatsActive(true), 300);
    return () => clearTimeout(timer);
  }, []);

  const whyRef = useFadeInRef();
  const ctaRef = useFadeInRef();

  // Scroll depth tracking
  const scrolledSections = useRef(new Set<string>());
  useEffect(() => {
    const ids = ['how-it-works'];
    const observers: IntersectionObserver[] = [];
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (!el) return;
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && !scrolledSections.current.has(id)) {
            scrolledSections.current.add(id);
            trackEvent('Scroll Depth', { section: id });
          }
        },
        { threshold: 0.1 }
      );
      observer.observe(el);
      observers.push(observer);
    });
    return () => observers.forEach((o) => o.disconnect());
  }, []);

  // 30s time-on-page event
  useEffect(() => {
    const timer = setTimeout(() => trackEvent('Time on Page', { seconds: '30' }), 30000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex-1 overflow-y-auto bg-warm-50 dark:bg-navy-950 relative">
      <div className="relative" style={{ zIndex: 1 }}>
        {/* Hero */}
        <div className="relative overflow-hidden bg-gradient-to-b from-navy-950 via-navy-900 to-navy-900 dark:from-navy-950 dark:via-navy-900 dark:to-navy-950 min-h-[calc(100dvh-3rem)] flex flex-col">
          <HexCanvas isDark={theme === 'dark'} />
          <div className="absolute top-1/3 left-1/4 w-[500px] h-[500px] bg-teal-500/[0.04] rounded-full blur-[120px] pointer-events-none" />
          <div className="absolute bottom-0 right-1/4 w-[400px] h-[300px] bg-teal-600/[0.03] rounded-full blur-[100px] pointer-events-none" />
          <div className="relative z-10 max-w-4xl mx-auto px-6 md:px-10 pt-16 md:pt-24 backdrop-blur-[2px] flex-1 flex flex-col">
            <div>
              <h1 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-[1.1] tracking-tight">
                {t('home.heroTitle1')} <span className="text-teal-400">{t('home.heroTitle2')}</span>.
                <br />
                {t('home.heroTitle3')}
              </h1>
              <p className="text-lg text-warm-300 mb-6 leading-relaxed max-w-xl">
                {t('home.heroSubtitle')}
              </p>
              <p className="text-lg text-warm-400 mb-8 max-w-xl">
                {t('home.heroDescription')}
              </p>
              <div className="flex items-center gap-4 mb-10">
                <button
                  onClick={() => {
                    trackEvent('CTA Click', { location: 'hero', label: 'explore_map' });
                    onOpenDashboard();
                  }}
                  className="px-7 py-3.5 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-base shadow-lg shadow-coral-500/25"
                >
                  {t('home.exploreTheMap')}
                </button>
                <button
                  onClick={() => {
                    trackEvent('CTA Click', { location: 'hero', label: 'see_difference' });
                    const target = document.getElementById('comparison');
                    if (!target) return;
                    const scroller = target.closest('.overflow-y-auto') as HTMLElement | null;
                    if (!scroller) return;
                    const start = scroller.scrollTop;
                    const end =
                      start +
                      target.getBoundingClientRect().top -
                      scroller.getBoundingClientRect().top -
                      48;
                    const distance = end - start;
                    const duration = 1200;
                    let startTime: number;
                    const step = (time: number) => {
                      if (!startTime) startTime = time;
                      const p = Math.min((time - startTime) / duration, 1);
                      const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
                      scroller.scrollTop = start + distance * ease;
                      if (p < 1) requestAnimationFrame(step);
                    };
                    requestAnimationFrame(step);
                  }}
                  className="px-[26px] py-[12px] border-2 border-teal-400 text-teal-400 rounded-lg font-semibold hover:bg-teal-400/10 transition-colors text-base"
                >
                  {t('home.seeTheDifference')}
                </button>
              </div>
              <div className="flex gap-12 pt-3 border-t border-white/10">
                <div>
                  <div className="text-2xl md:text-3xl font-bold text-white">
                    <TickerValue text="13M" active={statsActive} />
                  </div>
                  <div className="text-sm text-warm-400">{t('home.statProperties')}</div>
                </div>
                <div>
                  <div className="text-2xl md:text-3xl font-bold text-white">
                    <TickerValue text="56" active={statsActive} />
                  </div>
                  <div className="text-sm text-warm-400">{t('home.statFilters')}</div>
                </div>
                <div>
                  <div className="text-2xl md:text-3xl font-bold text-white">{t('home.statEvery')}</div>
                  <div className="text-sm text-warm-400">{t('home.statPostcodeInEngland')}</div>
                </div>
              </div>
            </div>
            <div className="flex-1" />
          </div>
        </div>

        {/* Our philosophy */}
        <div className="px-6 md:px-12 lg:px-20 pt-20 pb-4">
          <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6">
            {t('home.ourPhilosophy')}
          </h2>
          <div className="space-y-4 text-lg md:text-xl leading-relaxed text-warm-700 dark:text-warm-300">
            <p>
              {t('home.philosophyP1')}
            </p>
            <p>
              {t('home.philosophyP2')}
            </p>
          </div>
        </div>

        {/* How to use it + Comparison table (two columns) */}
        <div id="how-it-works" className="max-w-7xl mx-auto px-6 pt-10 pb-2">
          <div ref={whyRef} className="fade-in-section">
            <div className="grid lg:grid-cols-[2fr_3fr] gap-12 items-start">
              {/* Left: How to use it */}
              <div>
                <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
                  {t('home.howToUseIt')}
                </h2>
                <div className="space-y-8">
                  {[
                    { title: t('home.howStep1Title'), desc: t('home.howStep1Desc') },
                    { title: t('home.howStep2Title'), desc: t('home.howStep2Desc') },
                    { title: t('home.howStep3Title'), desc: t('home.howStep3Desc') },
                    { title: t('home.howStep4Title'), desc: t('home.howStep4Desc') },
                  ].map((step, i) => (
                    <div key={i} className="flex gap-5">
                      <div className="shrink-0 w-10 h-10 rounded-full bg-teal-600 text-white flex items-center justify-center font-bold text-lg">
                        {i + 1}
                      </div>
                      <div>
                        <h3 className="font-bold text-navy-950 dark:text-warm-100 mb-1">
                          {step.title}
                        </h3>
                        <p className="text-warm-600 dark:text-warm-400 leading-relaxed">
                          {step.desc}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              {/* Right: Comparison table */}
              <div id="comparison">
                <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10">
                  {t('home.othersVs')}{' '}
                  <span className="inline-flex items-baseline gap-3 whitespace-nowrap">
                    {t('header.appName')}{' '}
                    <LogoIcon className="w-8 h-8 text-teal-600 dark:text-teal-400" />
                  </span>
                </h2>
                <div className="overflow-x-auto rounded-xl border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 shadow-sm">
                  <table className="w-full text-left">
                    <thead>
                      <tr className="border-b border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800">
                        <th className="px-2 md:px-5 py-3 md:py-4 text-xs md:text-sm font-bold text-navy-950 dark:text-warm-100" />
                        <th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
                          {t('home.listingPortals')}
                        </th>
                        <th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
                          {t('home.checkMyPostcode')}
                        </th>
                        <th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-bold text-navy-950 dark:text-warm-100 text-center">
                          {t('home.areaGuides')}
                        </th>
                        <th className="px-1.5 md:px-3 py-3 md:py-4 text-[10px] md:text-xs font-extrabold text-navy-950 dark:text-warm-100 text-center bg-teal-50 dark:bg-teal-900/30">
                          {t('header.appName')}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {[
                        { feature: t('home.compSearchWithout'), subtitle: t('home.compSearchWithoutSub'), listings: false, postcode: false, guides: false },
                        { feature: t('home.compAreaData'), subtitle: t('home.compAreaDataSub'), listings: false, postcode: true, guides: true },
                        { feature: t('home.compPropertyData'), subtitle: t('home.compPropertyDataSub'), listings: true, postcode: false, guides: false },
                        { feature: t('home.compFilters'), subtitle: t('home.compFiltersSub'), listings: false, postcode: false, guides: false },
                      ].map((row, i, arr) => (
                        <tr
                          key={i}
                          className={
                            i < arr.length - 1
                              ? 'border-b border-warm-100 dark:border-warm-800'
                              : ''
                          }
                        >
                          <td className="px-2 md:px-5 py-2.5 md:py-3.5 text-xs md:text-sm text-warm-700 dark:text-warm-300">
                            {row.feature}
                            {row.subtitle && (
                              <div className="italic text-warm-500 dark:text-warm-400">
                                {row.subtitle}
                              </div>
                            )}
                          </td>
                          {[row.listings, row.postcode, row.guides].map((has, j) => (
                            <td
                              key={j}
                              className={`px-1.5 md:px-3 py-2.5 md:py-3.5 text-center text-base md:text-lg ${has ? 'text-green-500' : 'text-red-500'}`}
                            >
                              {has ? '\u2713' : '\u2717'}
                            </td>
                          ))}
                          <td className="px-1.5 md:px-3 py-2.5 md:py-3.5 text-center text-base md:text-lg text-green-500 bg-teal-50 dark:bg-teal-900/30">
                            &#x2713;
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* The real cost CTA */}
        <div className="max-w-4xl mx-auto px-6 pt-20 pb-12">
          <div ref={ctaRef} className="fade-in-section text-center">
            <h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-4 leading-snug">
              {t('home.ctaTitle')}
            </h2>
            <p className="text-warm-600 dark:text-warm-400 mb-8 max-w-xl mx-auto leading-relaxed">
              {t('home.ctaDescription')}
            </p>
            <button
              onClick={() => {
                trackEvent('CTA Click', { location: 'bottom', label: 'explore_map' });
                onOpenDashboard();
              }}
              className="px-8 py-4 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-lg shadow-lg shadow-coral-500/25"
            >
              {t('home.exploreTheMap')}
            </button>
          </div>
        </div>

        {/* Bottom illustration */}
        <BottomIllustration isDark={theme === 'dark'} />
      </div>
    </div>
  );
}