'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { agentsService, AgentType } from '@/services/agents.service';
import { profileSectionsService } from '@/services/profile-sections.service';
import type { HeroContent } from '@/types/cms';

const defaultHeroContent: HeroContent = {
  headline: '\u201cDiscover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.\u201d',
  description: 'Discover verified, top-rated real estate professionals',
  ctaButtonText: 'See All',
  helperText: 'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.',
};

export function HeroSection({ content }: { content?: HeroContent }) {
  const data = content ?? defaultHeroContent;
  const router = useRouter();
  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
  const [specializationOptions, setSpecializationOptions] = useState<{ id: string; name: string }[]>([]);
  const [specializationSlug, setSpecializationSlug] = useState<string>('');
  const [searchParams, setSearchParams] = useState({
    specialization: '',
    type: '',
    name: '',
    location: '',
  });
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);

  // Fetch agent types and specialization options on mount
  useEffect(() => {
    const fetchAgentTypes = async () => {
      try {
        const types = await agentsService.getAgentTypes();
        setAgentTypes(types);
      } catch (error) {
        console.error('Failed to fetch agent types:', error);
      }
    };
    const fetchSpecializations = async () => {
      try {
        const fields = await profileSectionsService.getFilterableFields();
        const specField = fields.find(f => f.slug.includes('specialization'));
        if (specField) {
          setSpecializationSlug(specField.slug);
          setSpecializationOptions(specField.options.map(o => ({ id: o.value, name: o.label })));
        }
      } catch (error) {
        console.error('Failed to fetch specializations:', error);
      }
    };
    fetchAgentTypes();
    fetchSpecializations();
  }, []);

  const handleSearch = () => {
    // Validate that at least one field has a value
    const hasType = searchParams.type.trim() !== '';
    const hasName = searchParams.name.trim() !== '';
    const hasLocation = searchParams.location.trim() !== '';
    const hasSpecialization = searchParams.specialization.trim() !== '';

    if (!hasType && !hasName && !hasLocation && !hasSpecialization) {
      setValidationError('Please enter at least one search criteria (Type, Name/Keyword, Location, or Specialization)');
      return;
    }

    // Clear any previous validation error
    setValidationError(null);

    const params = new URLSearchParams();
    if (searchParams.type) params.set('type', searchParams.type);
    if (searchParams.name) params.set('name', searchParams.name);
    if (searchParams.location) params.set('location', searchParams.location);
    if (searchParams.specialization && specializationSlug) {
      params.set('filters', JSON.stringify({ [specializationSlug]: [searchParams.specialization] }));
    }
    router.push(`/user/profiles?${params.toString()}`);
  };

  const handleSeeAllAgents = () => {
    router.push('/user/profiles');
  };

  const toggleDropdown = (dropdown: string) => {
    setOpenDropdown(openDropdown === dropdown ? null : dropdown);
  };

  const selectSpecialization = (value: string) => {
    setSearchParams({ ...searchParams, specialization: value });
    setOpenDropdown(null);
    setValidationError(null);
  };

  const selectType = (value: string) => {
    setSearchParams({ ...searchParams, type: value });
    setOpenDropdown(null);
    setValidationError(null); // Clear error when user selects a type
  };

  const handleInputChange = (field: 'name' | 'location', value: string) => {
    setSearchParams({ ...searchParams, [field]: value });
    setValidationError(null); // Clear error when user starts typing
  };

  const handleClearError = () => {
    setValidationError(null);
  };

  return (
    <section className="relative min-h-[540px] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src="/assets/images/user_home_top.png"
          alt=""
          fill
          className="object-cover object-bottom"
          priority
        />
      </div>

      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-10 min-h-[540px] flex flex-col">
        {/* Headline */}
        <div className="text-center mb-8">
          <h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto">
            {data.headline}
          </h1>
          <p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2">
            {data.description}
          </p>
        </div>

        {/* Search Form */}
        <div className="max-w-5xl mx-auto relative">
          <div className="bg-[#e58625] rounded-[15px] shadow-lg p-3">
            <div className="flex flex-col md:flex-row gap-2">
              {/* Type Select */}
              <div className="relative flex-shrink-0 md:w-[160px]">
                <button
                  onClick={() => toggleDropdown('type')}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
                >
                  <span className="font-serif text-sm text-[#00293d]">
                    {searchParams.type ? agentTypes.find(t => t.id === searchParams.type)?.name : 'Types'}
                  </span>
                  <Image
                    src="/assets/icons/chevron-down-icon.svg"
                    alt=""
                    width={10}
                    height={10}
                    className={`transition-transform ${openDropdown === 'type' ? 'rotate-180' : ''}`}
                  />
                </button>
                {openDropdown === 'type' && (
                  <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
                    {agentTypes.map((type, index, arr) => (
                      <button
                        key={type.id}
                        onClick={() => selectType(type.id)}
                        className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
                      >
                        {type.name}
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Name Input */}
              <div className="flex-1 md:min-w-[180px]">
                <input
                  type="text"
                  placeholder="Name or Keyword"
                  value={searchParams.name}
                  onChange={(e) => handleInputChange('name', e.target.value)}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
                />
              </div>

              {/* Location Input */}
              <div className="flex-1 md:min-w-[140px]">
                <input
                  type="text"
                  placeholder="Location"
                  value={searchParams.location}
                  onChange={(e) => handleInputChange('location', e.target.value)}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
                />
              </div>

              {/* Specialization Select */}
              <div className="relative flex-shrink-0 md:w-[160px]">
                <button
                  onClick={() => toggleDropdown('specialization')}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
                >
                  <span className="font-serif text-sm text-[#00293d] truncate">
                    {searchParams.specialization ? specializationOptions.find(o => o.id === searchParams.specialization)?.name : 'Specialization'}
                  </span>
                  <Image
                    src="/assets/icons/chevron-down-icon.svg"
                    alt=""
                    width={10}
                    height={10}
                    className={`transition-transform ${openDropdown === 'specialization' ? 'rotate-180' : ''}`}
                  />
                </button>
                {openDropdown === 'specialization' && (
                  <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
                    {specializationOptions.map((option, index, arr) => (
                      <button
                        key={option.id}
                        onClick={() => selectSpecialization(option.id)}
                        className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
                      >
                        {option.name}
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Search Button */}
              <div className="flex-shrink-0">
                <button
                  onClick={handleSearch}
                  className="w-full md:w-[48px] h-[42px] rounded-[7px] bg-[#00293d] hover:bg-[#00293d]/90 text-white transition-colors flex items-center justify-center"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          {/* Validation Error Message */}
          {validationError && (
            <div className="absolute left-0 right-0 mt-2 text-center z-10 px-4">
              <div className="text-white font-serif text-sm bg-red-500/90 rounded-[7px] py-2 px-4 inline-flex items-center gap-3 max-w-full">
                <span className="text-left">{validationError}</span>
                <button
                  onClick={handleClearError}
                  className="hover:bg-white/20 rounded-full p-0.5 transition-colors"
                  title="Dismiss"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
          )}

        </div>

        {/* Bottom Section */}
        <div className="mt-auto pt-6">
          {/* See All Agents Button */}
          <div className="flex justify-center">
            <button
              onClick={handleSeeAllAgents}
              className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-base transition-colors shadow-md hover:shadow-lg"
            >
              {data.ctaButtonText}
            </button>
          </div>

          {/* Helper Text */}
          <p className="text-center font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mt-3 max-w-[419px] mx-auto">
            {data.helperText}
          </p>
        </div>
      </div>
    </section>
  );
}
