"use client";

import React, { useState } from "react";
import { Search, MapPin, Calendar, Compass, Loader2 } from "lucide-react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";

export function HeroSearchForm() {
  const [activeTab, setActiveTab] = useState<"tour" | "flight" | "car">("tour");
  const [isLoading, setIsLoading] = useState(false);
  const t = useTranslations("Home.search");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // Simulasi loading selama 1.5 detik
    setTimeout(() => {
      setIsLoading(false);
      // Di sini bisa ditambahkan logika navigasi/pencarian sungguhan
    }, 1500);
  };

  return (
    <div className="relative z-20 w-full max-w-5xl mx-auto px-4 -mt-24 mb-16">
      <div className="bg-white/80 backdrop-blur-xl rounded-3xl p-3 md:p-4 shadow-2xl shadow-ranata-dark/10 border border-white">
        
        {/* Navigation Tabs */}
        <div className="flex items-center gap-3 mb-5 border-b border-gray-200 pb-3 px-2 overflow-x-auto scrollbar-hide">
          <motion.button
            whileTap={{ scale: 0.95 }}
            onClick={() => setActiveTab("tour")}
            className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all whitespace-nowrap border-2 ${
              activeTab === "tour" 
                ? "bg-ranata-dark border-ranata-dark text-white shadow-md shadow-ranata-dark/20" 
                : "bg-transparent border-gray-300 text-gray-500 hover:border-ranata-light hover:text-ranata-light"
            }`}
          >
            <Compass className="w-4 h-4" /> {t('tour')}
          </motion.button>
          
          <motion.button
            whileTap={{ scale: 0.95 }}
            onClick={() => setActiveTab("flight")}
            className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all whitespace-nowrap border-2 ${
              activeTab === "flight" 
                ? "bg-ranata-dark border-ranata-dark text-white shadow-md shadow-ranata-dark/20" 
                : "bg-transparent border-gray-300 text-gray-500 hover:border-ranata-light hover:text-ranata-light"
            }`}
          >
            <Calendar className="w-4 h-4" /> {t('flight')}
          </motion.button>
          
          <motion.button
            whileTap={{ scale: 0.95 }}
            onClick={() => setActiveTab("car")}
            className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all whitespace-nowrap border-2 ${
              activeTab === "car" 
                ? "bg-ranata-dark border-ranata-dark text-white shadow-md shadow-ranata-dark/20" 
                : "bg-transparent border-gray-300 text-gray-500 hover:border-ranata-light hover:text-ranata-light"
            }`}
          >
            <MapPin className="w-4 h-4" /> {t('car')}
          </motion.button>
        </div>

        {/* Form Inputs Grid */}
        <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-3">
          <div className="bg-white rounded-2xl p-3 border border-gray-200 hover:border-ranata-light transition-colors flex items-center gap-3">
            <MapPin className="w-5 h-5 text-ranata-light shrink-0" />
            <div className="flex flex-col w-full">
              <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">{t('destLabel')}</label>
              <input 
                type="text" 
                placeholder={t('destPlaceholder')} 
                className="w-full text-sm font-semibold text-slate-800 focus:outline-none placeholder:text-slate-300 bg-transparent"
              />
            </div>
          </div>

          <div className="bg-white rounded-2xl p-3 border border-gray-200 hover:border-ranata-light transition-colors flex items-center gap-3">
            <Calendar className="w-5 h-5 text-ranata-light shrink-0" />
            <div className="flex flex-col w-full">
              <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">{t('dateLabel')}</label>
              <input 
                type="date" 
                className="w-full text-sm font-semibold text-slate-800 focus:outline-none bg-transparent"
              />
            </div>
          </div>

          <div className="bg-white rounded-2xl p-3 border border-gray-200 hover:border-ranata-light transition-colors flex items-center gap-3">
            <Compass className="w-5 h-5 text-ranata-light shrink-0" />
            <div className="flex flex-col w-full">
              <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">{t('catLabel')}</label>
              <select className="w-full text-sm font-semibold text-slate-800 focus:outline-none bg-transparent cursor-pointer">
                <option>{t('catPlaceholder')}</option>
                <option>Honeymoon</option>
                <option>Keluarga</option>
                <option>Petualangan</option>
              </select>
            </div>
          </div>

          <motion.button 
            type="submit"
            disabled={isLoading}
            whileTap={{ scale: 0.95 }}
            className="bg-gradient-to-r from-ranata-dark to-ranata-light text-white rounded-2xl p-4 flex items-center justify-center gap-2 font-bold hover:shadow-lg hover:shadow-ranata-light/30 transition-all disabled:opacity-70 disabled:cursor-not-allowed h-full"
          >
            {isLoading ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" /> 
                <span>{t('searching')}</span>
              </>
            ) : (
              <>
                <Search className="w-5 h-5" /> 
                <span>{t('button')}</span>
              </>
            )}
          </motion.button>
        </form>
      </div>
    </div>
  );
}