'use client';

import { useState } from 'react';

// Filter options data
export const clientSpecializations = [
  'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate'
];

export const loanTypes = [
  'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs'
];

export const propertyTypes = [
  'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily',
  'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing',
  'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property'
];

export const pricePoints = [
  'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above'
];

export const specialInterests = [
  'Workshop / Trade / Craftspace', 'Gardening/Landscape', 'Boating',
  'Automotive', 'Hobby farm', 'Home theater'
];

export const popularFilters = [
  'Sellers Agent', 'First-Time Buyer', 'Buyers Agent', 'Buyers Agent',
  'Buyers Agent', 'First-Time Seller', 'Buyers Agent'
];

export interface FilterState {
  clientSpecialization: string[];
  loanType: string[];
  propertyType: string[];
  pricePoint: string[];
  specialInterests: string[];
  popularFilters: string[];
}

interface FilterModalProps {
  isOpen: boolean;
  onClose: () => void;
  filters: FilterState;
  onToggleFilter: (category: string, option: string) => void;
  onClearAll: () => void;
  onApply: () => void;
}

export function FilterModal({ isOpen, onClose, filters, onToggleFilter, onClearAll, onApply }: FilterModalProps) {
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
    popularFilters: true,
    clientSpecialization: true,
    loanType: true,
    propertyType: true,
    specialInterests: true,
    pricePoint: true,
  });

  const toggleSection = (section: string) => {
    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/30" onClick={onClose} />

      {/* Modal */}
      <div className="relative bg-white rounded-[20px] w-[600px] max-h-[90vh] overflow-hidden shadow-xl">
        {/* Header */}
        <div className="sticky top-0 bg-white px-8 py-5 border-b border-[#d9d9d9] flex items-center justify-between z-10">
          <h2 className="font-fractul font-bold text-[25px] text-[#00293d]">Filters</h2>
          <button onClick={onClose} className="text-[#00293d] hover:opacity-70">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        {/* Scrollable Content */}
        <div className="overflow-y-auto max-h-[calc(90vh-180px)] px-8 py-5">
          {/* Popular Filters */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('popularFilters')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Popular Filters
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.popularFilters ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.popularFilters && (
              <div className="flex flex-wrap gap-2">
                {popularFilters.map((filter, index) => (
                  <button
                    key={index}
                    onClick={() => onToggleFilter('popularFilters', filter)}
                    className={`px-4 py-2.5 rounded-[15px] border border-[#00293d] font-serif text-[14px] transition-colors ${
                      filters.popularFilters?.includes(filter)
                        ? 'bg-[#00293d] text-white'
                        : 'bg-white text-[#00293d] hover:bg-[#00293d]/5'
                    }`}
                  >
                    {filter}
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="border-t border-[#d9d9d9] my-4" />

          {/* Client Specialization */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('clientSpecialization')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Client Specialization
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.clientSpecialization ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.clientSpecialization && (
              <>
                <div className="grid grid-cols-4 gap-x-4 gap-y-3">
                  {clientSpecializations.slice(0, 5).map((option) => (
                    <label key={option} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={filters.clientSpecialization.includes(option)}
                        onChange={() => onToggleFilter('clientSpecialization', option)}
                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
                      />
                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
                    </label>
                  ))}
                </div>
                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
                  Show More
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </>
            )}
          </div>

          <div className="border-t border-[#d9d9d9] my-4" />

          {/* Loan Type */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('loanType')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Loan Type
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.loanType ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.loanType && (
              <>
                <div className="grid grid-cols-4 gap-x-4 gap-y-3">
                  {loanTypes.map((option) => (
                    <label key={option} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={filters.loanType.includes(option)}
                        onChange={() => onToggleFilter('loanType', option)}
                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
                      />
                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
                    </label>
                  ))}
                </div>
                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
                  Show More
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </>
            )}
          </div>

          <div className="border-t border-[#d9d9d9] my-4" />

          {/* Property Type */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('propertyType')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Property Type
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.propertyType ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.propertyType && (
              <>
                <div className="grid grid-cols-3 gap-x-4 gap-y-3">
                  {propertyTypes.map((option) => (
                    <label key={option} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={filters.propertyType.includes(option)}
                        onChange={() => onToggleFilter('propertyType', option)}
                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
                      />
                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
                    </label>
                  ))}
                </div>
                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
                  Show More
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </>
            )}
          </div>

          <div className="border-t border-[#d9d9d9] my-4" />

          {/* Special Interests and Hobbies */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('specialInterests')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Special Interests and Hobbies
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.specialInterests ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.specialInterests && (
              <>
                <div className="grid grid-cols-3 gap-x-4 gap-y-3">
                  {specialInterests.map((option) => (
                    <label key={option} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={filters.specialInterests?.includes(option) || false}
                        onChange={() => onToggleFilter('specialInterests', option)}
                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
                      />
                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
                    </label>
                  ))}
                </div>
                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
                  Show More
                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </>
            )}
          </div>

          <div className="border-t border-[#d9d9d9] my-4" />

          {/* Price Point */}
          <div className="mb-6">
            <button
              onClick={() => toggleSection('pricePoint')}
              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
            >
              Price Point
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.pricePoint ? 'rotate-180' : ''}`}>
                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {expandedSections.pricePoint && (
              <div className="grid grid-cols-3 gap-x-4 gap-y-3">
                {pricePoints.map((option) => (
                  <label key={option} className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={filters.pricePoint.includes(option)}
                      onChange={() => onToggleFilter('pricePoint', option)}
                      className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
                    />
                    <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
                  </label>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="sticky bottom-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
          <button
            onClick={onClearAll}
            className="px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors"
          >
            Clear all Filters
          </button>
          <button
            onClick={onApply}
            className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] font-fractul font-bold text-[14px] text-[#00293d] transition-colors"
          >
            Apply Filters
          </button>
        </div>
      </div>
    </div>
  );
}
