'use client';

import { useState } from 'react';
import Image from 'next/image';
import { availableBikes } from '@/data/mockData';
import { Check, Battery, MapPin, ArrowRight, Zap } from 'lucide-react';

export default function RentPage() {
  const [selectedBike, setSelectedBike] = useState<string | null>(null);
  const [rentalType, setRentalType] = useState<'single' | 'shared' | 'rent-to-own'>('single');

  const plans = [
    { id: 'single', name: 'Standard Rental', price: 350, badge: 'demo=50tk', features: ['Single rider', 'Daily/Weekly/Monthly', 'Full insurance'] },
    { id: 'shared', name: 'Shared (2 Person)', price: 600, badge: 'demo=60tk', features: ['2 riders', 'Split payments', 'Shared deposit'] },
    { id: 'rent-to-own', name: 'Rent-to-Own', price: 450, badge: 'demo=45tk', features: ['Ownership potential', 'Flexible terms', 'Transfer ready'] },
  ];

  return (
    <div className="p-4 lg:p-6">
      <div className="mb-6">
        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Rent a Bike</h1>
        <p className="text-sm text-slate-500">Choose your plan and bike</p>
      </div>

      <div className="mb-6">
        <h2 className="text-lg font-bold text-slate-800 mb-3">Select Plan</h2>
        <div className="grid grid-cols-3 gap-3">
          {plans.map(plan => (
            <button
              key={plan.id}
              onClick={() => setRentalType(plan.id as 'single' | 'shared' | 'rent-to-own')}
              className={`p-4 rounded-xl border-2 text-left transition-all ${
                rentalType === plan.id 
                  ? 'border-accent bg-accent-light shadow-md' 
                  : 'border-slate-200 bg-white hover:border-accent/50'
              }`}
            >
              <div className="flex items-center gap-2 mb-2">
                <span className="text-sm font-bold text-slate-800">{plan.name}</span>
                <span className="text-[10px] font-semibold px-1.5 py-0.5 bg-accent text-white rounded">{plan.badge}</span>
              </div>
              <p className="text-xl font-extrabold text-accent">৳{plan.price}<span className="text-xs font-normal text-slate-500">/day</span></p>
              <div className="mt-3 space-y-1">
                {plan.features.map((f, i) => (
                  <p key={i} className="text-xs text-slate-500 flex items-center gap-1">
                    <Check className="w-3 h-3 text-green-500" /> {f}
                  </p>
                ))}
              </div>
            </button>
          ))}
        </div>
      </div>

      <div className="mb-6">
        <h2 className="text-lg font-bold text-slate-800 mb-3">Available Bikes</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {availableBikes.map(bike => (
            <div
              key={bike.id}
              onClick={() => setSelectedBike(bike.id)}
              className={`bg-white rounded-xl overflow-hidden shadow-sm border-2 cursor-pointer transition-all hover:shadow-md ${
                selectedBike === bike.id ? 'border-accent shadow-md' : 'border-slate-100'
              }`}
            >
              <div className="h-32 bg-slate-100 relative">
                <Image src={bike.image} alt={bike.model} fill className="object-cover" />
                {selectedBike === bike.id && (
                  <div className="absolute top-2 right-2 w-6 h-6 bg-accent rounded-full flex items-center justify-center">
                    <Check className="w-4 h-4 text-white" />
                  </div>
                )}
                <div className="absolute bottom-2 left-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-md flex items-center gap-1">
                  <Battery className="w-3 h-3 text-green-600" />
                  <p className="text-xs font-semibold text-slate-700">{bike.batteryLevel}%</p>
                </div>
              </div>
              <div className="p-4">
                <h3 className="font-bold text-slate-800">{bike.model}</h3>
                <p className="text-sm text-slate-500">{bike.brand} • {bike.plateNumber}</p>
                <p className="text-xs text-slate-400 mt-1 flex items-center gap-1"><MapPin className="w-3 h-3" /> {bike.location}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-slate-200 lg:relative">
        <div className="flex items-center justify-between max-w-4xl mx-auto">
          <div>
            <p className="text-sm text-slate-500">Selected Bike</p>
            <p className="font-bold text-slate-800">
              {selectedBike ? availableBikes.find(b => b.id === selectedBike)?.model : 'None'}
            </p>
          </div>
          <button
            disabled={!selectedBike}
            className={`px-6 py-3 rounded-lg font-bold text-white transition-colors flex items-center gap-2 ${
              selectedBike 
                ? 'bg-accent hover:bg-accent-dark' 
                : 'bg-slate-300 cursor-not-allowed'
            }`}
          >
            Continue <ArrowRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}