'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { MapPin, Wallet, Sprout, ArrowRight, Building2, Home } from 'lucide-react';
import Link from 'next/link';

export default function OnboardingPage() {
 const router = useRouter();
 const [step, setStep] = useState(1);
 const [preferences, setPreferences] = useState({
  type: '',
  budget: '',
  location: ''
 });

 const handleNext = () => {
  if (step < 3) setStep(step + 1);
  else {
   // Here you would typically save preferences to a database/state
   router.push('/map');
  }
 };

 return (
  <div className="min-h-screen bg-slate-50 flex flex-col">
   <header className="bg-white border-b border-slate-100 py-4 px-6 md:px-12 flex items-center justify-between sticky top-0 z-50">
    <Link href="/" className="flex items-center gap-2">
     <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
      <span className="text-white font-black text-sm">Z</span>
     </div>
     <span className="text-xl font-black text-slate-900 tracking-tight">Zameen</span>
    </Link>
    <Link href="/map" className="text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors">
     Skip for now
    </Link>
   </header>

   <main className="flex-1 flex items-center justify-center p-6">
    <div className="max-w-xl w-full bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-8 md:p-12 border border-slate-100 ">
     
     <div className="flex gap-2 mb-8">
      {[1, 2, 3].map((s) => (
       <div key={s} className={`h-2 flex-1 rounded-full transition-colors duration-300 ${s <= step ? 'bg-emerald-500' : 'bg-slate-100 '}`} />
      ))}
     </div>

     <div className="min-h-[300px]">
      {step === 1 && (
       <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="flex flex-col gap-6">
        <div>
         <h2 className="text-2xl font-black text-slate-900 mb-2">What kind of land are you looking for?</h2>
         <p className="text-slate-500 ">This helps us show you the most relevant properties.</p>
        </div>
        <div className="grid gap-3">
         {[
          { id: 'agricultural', icon: Sprout, label: 'Agricultural Land', desc: 'Farms, orchards, and rural plots' },
          { id: 'commercial', icon: Building2, label: 'Commercial Land', desc: 'Warehouses, factories, and retail' },
          { id: 'residential', icon: Home, label: 'Residential Land', desc: 'Plots for housing and development' },
         ].map((option) => (
          <button
           key={option.id}
           onClick={() => setPreferences({ ...preferences, type: option.id })}
           className={`flex items-start gap-4 p-4 rounded-2xl border-2 transition-all text-left ${
            preferences.type === option.id ? 'border-emerald-500 bg-emerald-50' : 'border-slate-100 hover:border-emerald-200'
           }`}
          >
           <div className={`p-2 rounded-xl ${preferences.type === option.id ? 'bg-emerald-500 text-white' : 'bg-slate-100 text-slate-600 '}`}>
            <option.icon className="w-5 h-5" />
           </div>
           <div>
            <div className="font-bold text-slate-900 ">{option.label}</div>
            <div className="text-sm text-slate-500 ">{option.desc}</div>
           </div>
          </button>
         ))}
        </div>
       </motion.div>
      )}

      {step === 2 && (
       <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="flex flex-col gap-6">
        <div>
         <h2 className="text-2xl font-black text-slate-900 mb-2">What's your budget range?</h2>
         <p className="text-slate-500 ">We'll filter out properties outside your range.</p>
        </div>
        <div className="grid gap-3">
         {[
          { id: 'under-50l', label: 'Under ₹50 Lakhs' },
          { id: '50l-2cr', label: '₹50 Lakhs - ₹2 Crores' },
          { id: '2cr-plus', label: '₹2 Crores +' },
         ].map((option) => (
          <button
           key={option.id}
           onClick={() => setPreferences({ ...preferences, budget: option.id })}
           className={`flex items-center gap-4 p-4 rounded-2xl border-2 transition-all text-left ${
            preferences.budget === option.id ? 'border-emerald-500 bg-emerald-50 text-emerald-900 font-bold' : 'border-slate-100 hover:border-emerald-200 text-slate-700 font-medium'
           }`}
          >
           <Wallet className={`w-5 h-5 ${preferences.budget === option.id ? 'text-emerald-500' : 'text-slate-400'}`} />
           {option.label}
          </button>
         ))}
        </div>
       </motion.div>
      )}

      {step === 3 && (
       <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="flex flex-col gap-6">
        <div>
         <h2 className="text-2xl font-black text-slate-900 mb-2">Where do you want to invest?</h2>
         <p className="text-slate-500 ">Select your preferred region.</p>
        </div>
        <div className="grid gap-3">
         {[
          { id: 'karnataka', label: 'Karnataka (Bengaluru, Mysuru)' },
          { id: 'maharashtra', label: 'Maharashtra (Mumbai, Pune)' },
          { id: 'telangana', label: 'Telangana (Hyderabad)' },
          { id: 'other', label: 'Other Regions' },
         ].map((option) => (
          <button
           key={option.id}
           onClick={() => setPreferences({ ...preferences, location: option.id })}
           className={`flex items-center gap-4 p-4 rounded-2xl border-2 transition-all text-left ${
            preferences.location === option.id ? 'border-emerald-500 bg-emerald-50 text-emerald-900 font-bold' : 'border-slate-100 hover:border-emerald-200 text-slate-700 font-medium'
           }`}
          >
           <MapPin className={`w-5 h-5 ${preferences.location === option.id ? 'text-emerald-500' : 'text-slate-400'}`} />
           {option.label}
          </button>
         ))}
        </div>
       </motion.div>
      )}
     </div>

     <div className="mt-8 pt-8 border-t border-slate-100 flex items-center justify-between">
      {step > 1 ? (
       <button onClick={() => setStep(step - 1)} className="px-6 py-3 rounded-xl font-semibold text-slate-500 hover:bg-slate-100 transition-colors">
        Back
       </button>
      ) : (
       <div />
      )}
      
      <button
       onClick={handleNext}
       disabled={(step === 1 && !preferences.type) || (step === 2 && !preferences.budget) || (step === 3 && !preferences.location)}
       className="bg-emerald-600 text-white px-8 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-emerald-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
      >
       {step === 3 ? 'Explore Map' : 'Continue'}
       <ArrowRight className="w-4 h-4" />
      </button>
     </div>

    </div>
   </main>
  </div>
 );
}