import React, { useEffect } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { 
  mdiMagnify, 
  mdiMapMarker, 
  mdiShieldCheck, 
  mdiCurrencyUsd, 
  mdiFlash,
  mdiTools,
  mdiPowerPlug,
  mdiAirConditioner,
  mdiBrush,
  mdiFormatPaint,
  mdiClipboardTextOutline,
  mdiCheckCircleOutline
} from '@mdi/js';
import BaseIcon from '../components/BaseIcon';
import LayoutGuest from '../layouts/Guest';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
import { fetch as fetchCategories } from '../stores/categories/categoriesSlice';

export default function LandingPage() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { categories } = useAppSelector((state) => state.categories);
  const { currentUser } = useAppSelector((state) => state.auth);

  useEffect(() => {
    dispatch(fetchCategories({ query: '?limit=8' }));
  }, [dispatch]);

  const featuredCategories = [
    { name: 'Plumbing', icon: mdiTools, color: 'text-blue-500' },
    { name: 'Electrical', icon: mdiPowerPlug, color: 'text-yellow-500' },
    { name: 'HVAC', icon: mdiAirConditioner, color: 'text-emerald-500' },
    { name: 'Cleaning', icon: mdiBrush, color: 'text-purple-500' },
    { name: 'Painting', icon: mdiFormatPaint, color: 'text-orange-500' },
    { name: 'General', icon: mdiTools, color: 'text-slate-500' },
  ];

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const query = formData.get('query');
    const location = formData.get('location');
    router.push({
      pathname: '/search',
      query: { query, location },
    });
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
      <Head>
        <title>Fix-It-Local™ | 21st Century Service Directory</title>
        <meta name="description" content="Connect with verified service professionals. Trust, transparency, and AI-powered matching." />
      </Head>

      {/* Hero Section */}
      <section className="relative bg-slate-900 text-white overflow-hidden py-32 lg:py-48">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 -left-4 w-72 h-72 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
          <div className="absolute top-0 -right-4 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
          <div className="absolute -bottom-8 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
        </div>

        <div className="container mx-auto px-6 relative z-10">
          <div className="text-center max-w-4xl mx-auto">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium mb-8">
              <BaseIcon path={mdiShieldCheck} size={18} className="mr-2" />
              Verified Professionals & AI-Powered Matching
            </div>
            <h1 className="text-5xl lg:text-7xl font-bold tracking-tight mb-8">
              The <span className="text-emerald-400">Fix-It-Local</span> Service Network
            </h1>
            <p className="text-xl text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
              Find reliable, verified experts for your home or business. Real-time availability, transparent pricing, and zero spam.
            </p>

            {/* Search Bar */}
            <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4 p-2 bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 shadow-2xl max-w-3xl mx-auto">
              <div className="flex-grow relative">
                <BaseIcon path={mdiMagnify} size={24} className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <input 
                  type="text" 
                  name="query"
                  placeholder="What service do you need?" 
                  className="w-full bg-transparent border-none focus:ring-0 py-4 pl-12 pr-4 text-white placeholder-slate-500 rounded-xl"
                />
              </div>
              <div className="md:w-px h-8 bg-white/10 my-auto"></div>
              <div className="flex-grow relative">
                <BaseIcon path={mdiMapMarker} size={24} className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <input 
                  type="text" 
                  name="location"
                  placeholder="Location" 
                  className="w-full bg-transparent border-none focus:ring-0 py-4 pl-12 pr-4 text-white placeholder-slate-500 rounded-xl"
                />
              </div>
              <button type="submit" className="bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-lg shadow-emerald-500/25">
                Find Help
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Featured Categories */}
      <section className="py-24 container mx-auto px-6">
        <div className="flex items-end justify-between mb-12">
          <div>
            <h2 className="text-3xl font-bold mb-4">Popular Services</h2>
            <p className="text-slate-500">Explore our most requested categories from verified pros.</p>
          </div>
          <Link href="/categories/categories-list" className="text-emerald-500 font-semibold hover:underline flex items-center">
            View All Categories
          </Link>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          {(categories?.length > 0 ? categories.slice(0, 6) : featuredCategories).map((cat: any, i: number) => (
            <Link 
              key={i} 
              href={`/search?query=${cat.name}`}
              className="group bg-white p-8 rounded-3xl border border-slate-200 hover:border-emerald-500 hover:shadow-xl hover:shadow-emerald-500/10 transition-all text-center"
            >
              <div className={`mb-4 w-16 h-16 mx-auto rounded-2xl flex items-center justify-center bg-slate-50 group-hover:bg-emerald-50 transition-colors`}>
                <BaseIcon path={cat.icon || mdiTools} size={32} className={cat.color || 'text-emerald-500'} />
              </div>
              <span className="font-bold text-slate-700 group-hover:text-emerald-600 transition-colors">{cat.name}</span>
            </Link>
          ))}
        </div>
      </section>

      {/* How it Works Section */}
      <section className="py-24 bg-white border-y border-slate-200 overflow-hidden">
        <div className="container mx-auto px-6">
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-4xl font-bold mb-6 text-slate-900 leading-tight">Simplified Discovery. Trusted Connections.</h2>
            <p className="text-lg text-slate-500 leading-relaxed">
              Fix-It-Local connects homeowners and businesses with verified professionals through a transparent, AI-powered process.
            </p>
          </div>

          <div className="grid md:grid-cols-4 gap-12 relative">
             {/* Connector line for desktop */}
            <div className="hidden lg:block absolute top-1/4 left-[10%] right-[10%] h-px bg-slate-200 -z-0"></div>
            
            <div className="relative z-10 text-center flex flex-col items-center">
               <div className="w-20 h-20 bg-emerald-500 text-white rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-emerald-500/20 transform hover:scale-110 transition-transform">
                  <BaseIcon path={mdiMagnify} size={36} />
               </div>
               <h4 className="font-bold text-xl mb-4">1. Find a Pro</h4>
               <p className="text-slate-500 text-sm leading-relaxed max-w-[200px]">Browse categories or search for specific verified services near you.</p>
            </div>

            <div className="relative z-10 text-center flex flex-col items-center">
               <div className="w-20 h-20 bg-blue-500 text-white rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-blue-500/20 transform hover:scale-110 transition-transform">
                  <BaseIcon path={mdiClipboardTextOutline} size={36} />
               </div>
               <h4 className="font-bold text-xl mb-4">2. Request Service</h4>
               <p className="text-slate-500 text-sm leading-relaxed max-w-[200px]">Submit details about your job. No signup required for initial requests.</p>
            </div>

            <div className="relative z-10 text-center flex flex-col items-center">
               <div className="w-20 h-20 bg-amber-500 text-white rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-amber-500/20 transform hover:scale-110 transition-transform">
                  <BaseIcon path={mdiFlash} size={36} />
               </div>
               <h4 className="font-bold text-xl mb-4">3. AI Smart Match</h4>
               <p className="text-slate-500 text-sm leading-relaxed max-w-[200px]">Our engine matches your request with the best available verified professional.</p>
            </div>

            <div className="relative z-10 text-center flex flex-col items-center">
               <div className="w-20 h-20 bg-indigo-500 text-white rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-indigo-500/20 transform hover:scale-110 transition-transform">
                  <BaseIcon path={mdiCheckCircleOutline} size={36} />
               </div>
               <h4 className="font-bold text-xl mb-4">4. Get it Done</h4>
               <p className="text-slate-500 text-sm leading-relaxed max-w-[200px]">Connect with your pro, review job history, and enjoy quality results.</p>
            </div>
          </div>
          
          <div className="text-center mt-20">
            <Link href="/about" className="inline-flex items-center text-emerald-600 font-bold text-lg hover:underline group">
              Learn more about our mission
              <BaseIcon path={mdiFlash} size={20} className="ml-2 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>
        </div>
      </section>

      {/* Trust Features */}
      <section className="py-24 bg-slate-900 text-white overflow-hidden relative">
        <div className="container mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-3 gap-12 text-center lg:text-left">
            <div className="p-8 rounded-3xl bg-white/5 border border-white/10">
              <div className="w-14 h-14 rounded-2xl bg-emerald-500 flex items-center justify-center mb-6 mx-auto lg:mx-0">
                <BaseIcon path={mdiShieldCheck} size={28} />
              </div>
              <h3 className="text-2xl font-bold mb-4">Verified Badges</h3>
              <p className="text-slate-400 leading-relaxed">Every business undergoes a strict evidence-based verification process. Look for the shield to ensure peace of mind.</p>
            </div>
            <div className="p-8 rounded-3xl bg-white/5 border border-white/10">
              <div className="w-14 h-14 rounded-2xl bg-blue-500 flex items-center justify-center mb-6 mx-auto lg:mx-0">
                <BaseIcon path={mdiCurrencyUsd} size={28} />
              </div>
              <h3 className="text-2xl font-bold mb-4">Price Transparency</h3>
              <p className="text-slate-400 leading-relaxed">No more hidden fees. See typical price ranges and median job costs upfront before you ever make a request.</p>
            </div>
            <div className="p-8 rounded-3xl bg-white/5 border border-white/10">
              <div className="w-14 h-14 rounded-2xl bg-amber-500 flex items-center justify-center mb-6 mx-auto lg:mx-0">
                <BaseIcon path={mdiFlash} size={28} />
              </div>
              <h3 className="text-2xl font-bold mb-4">AI Smart Matching</h3>
              <p className="text-slate-400 leading-relaxed">Our matching engine analyzes your issue and finds the best expert based on availability, score, and proximity.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-24 container mx-auto px-6">
        <div className="bg-emerald-500 rounded-[3rem] p-12 lg:p-20 text-white relative overflow-hidden flex flex-col lg:flex-row items-center justify-between">
          <div className="relative z-10 max-w-2xl text-center lg:text-left mb-10 lg:mb-0">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6">Are you a service professional?</h2>
            <p className="text-emerald-100 text-lg mb-0">Join the most trusted network of professionals and get high-quality leads that actually match your expertise.</p>
          </div>
          <div className="relative z-10 flex gap-4">
            <Link href="/register" className="bg-slate-900 hover:bg-black text-white font-bold py-5 px-10 rounded-2xl transition-all shadow-2xl">
              Register Business
            </Link>
            {!currentUser && (
              <Link href="/login" className="bg-white hover:bg-slate-100 text-emerald-600 font-bold py-5 px-10 rounded-2xl transition-all">
                Login
              </Link>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

LandingPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};