'use client';

/**
 * MarketplaceSearch Component
 * 
 * Central discovery and booking experience for the beauty services marketplace.
 * Supports service query, UAE location, date, time slot, and fast popular tags.
 */

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';

interface MarketplaceSearchProps {
  locale: string;
}

export function MarketplaceSearch({ locale }: MarketplaceSearchProps) {
  const router = useRouter();
  const t = useTranslations('marketplaceSearch');

  const [query, setQuery] = useState('');
  const [location, setLocation] = useState('all');
  const [timeSlot, setTimeSlot] = useState('any');

  const popularTags = [
    { label: 'Hair Blowdry', query: 'hair blowdry' },
    { label: 'Gel Nails', query: 'gel nails' },
    { label: 'Relaxing Massage', query: 'massage' },
    { label: 'HydraFacial', query: 'hydrafacial' },
    { label: 'Bridal Makeup', query: 'makeup' },
    { label: 'Lash Extensions', query: 'lashes' },
  ];

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();
    if (query.trim()) params.set('q', query.trim());
    if (location && location !== 'all') params.set('location', location);
    if (timeSlot && timeSlot !== 'any') params.set('time', timeSlot);

    router.push(`/${locale}/search?${params.toString()}`);
  };

  const handleTagClick = (tagQuery: string) => {
    setQuery(tagQuery);
    router.push(`/${locale}/search?q=${encodeURIComponent(tagQuery)}`);
  };

  return (
    <div className="w-full max-w-4xl mx-auto">
      {/* Central Search Card */}
      <form
        onSubmit={handleSearch}
        className="bg-surface rounded-2xl md:rounded-full p-2 md:p-3 shadow-elevated border border-border/80 flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-0 transition-all focus-within:ring-2 focus-within:ring-brand-500/20 focus-within:border-brand-500"
      >
        {/* 1. Service / Treatment Input */}
        <div className="flex-1 px-4 py-2.5 md:py-1 border-b md:border-b-0 md:border-e border-border/60 text-start">
          <label className="block text-[11px] font-bold text-muted uppercase tracking-wider mb-0.5">
            Service
          </label>
          <div className="flex items-center gap-2">
            <span className="text-muted text-base">✨</span>
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={t('servicePlaceholder')}
              className="w-full text-sm font-semibold text-ink placeholder:text-muted/70 bg-transparent focus:outline-none"
            />
          </div>
        </div>

        {/* 2. Location Selector */}
        <div className="md:w-48 px-4 py-2.5 md:py-1 border-b md:border-b-0 md:border-e border-border/60 text-start">
          <label className="block text-[11px] font-bold text-muted uppercase tracking-wider mb-0.5">
            Location
          </label>
          <div className="flex items-center gap-1.5">
            <span className="text-muted text-base">📍</span>
            <select
              value={location}
              onChange={(e) => setLocation(e.target.value)}
              className="w-full text-sm font-semibold text-ink bg-transparent focus:outline-none cursor-pointer"
            >
              <option value="all">{t('allLocations')}</option>
              <option value="dubai">{t('dubai')}</option>
              <option value="abu-dhabi">{t('abuDhabi')}</option>
              <option value="sharjah">{t('sharjah')}</option>
              <option value="ajman">{t('ajman')}</option>
            </select>
          </div>
        </div>

        {/* 3. Date / Time Selection */}
        <div className="md:w-44 px-4 py-2.5 md:py-1 text-start">
          <label className="block text-[11px] font-bold text-muted uppercase tracking-wider mb-0.5">
            When
          </label>
          <div className="flex items-center gap-1.5">
            <span className="text-muted text-base">🗓️</span>
            <select
              value={timeSlot}
              onChange={(e) => setTimeSlot(e.target.value)}
              className="w-full text-sm font-semibold text-ink bg-transparent focus:outline-none cursor-pointer"
            >
              <option value="any">{t('anyTime')}</option>
              <option value="morning">{t('morning')}</option>
              <option value="afternoon">{t('afternoon')}</option>
              <option value="evening">{t('evening')}</option>
            </select>
          </div>
        </div>

        {/* Search Submit CTA */}
        <button
          type="submit"
          className="px-7 py-4 md:py-3.5 bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white font-bold text-sm rounded-xl md:rounded-full shadow-brand transition-transform active:scale-95 flex items-center justify-center gap-2 flex-shrink-0"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          <span>{t('findButton')}</span>
        </button>
      </form>

      {/* Popular Beauty Quick Tags */}
      <div className="mt-4 flex flex-wrap items-center justify-center gap-2 text-xs">
        <span className="text-muted font-medium">{t('popularTag')}</span>
        {popularTags.map((tag) => (
          <button
            key={tag.label}
            type="button"
            onClick={() => handleTagClick(tag.query)}
            className="px-3 py-1 bg-surface/90 hover:bg-brand-50 hover:text-brand-600 hover:border-brand-300 text-ink border border-border/80 rounded-full font-medium transition-colors backdrop-blur-xs shadow-xs"
          >
            {tag.label}
          </button>
        ))}
      </div>
    </div>
  );
}