'use client'

import { useState } from 'react'
import { Calendar, Clock } from 'lucide-react'

interface DeliveryScheduleProps {
  onSelect: (date: string, slot: string) => void
}

const timeSlots = [
  { id: 'morning', label: 'Morning', time: '8:00 AM - 11:00 AM' },
  { id: 'evening', label: 'Evening', time: '5:00 PM - 8:00 PM' },
]

export default function DeliverySchedule({ onSelect }: DeliveryScheduleProps) {
  const [selectedDate, setSelectedDate] = useState('')
  const [selectedSlot, setSelectedSlot] = useState('')

  const handleSubmit = () => {
    if (selectedDate && selectedSlot) {
      onSelect(selectedDate, selectedSlot)
    }
  }

  // Get next 7 days
  const getDates = () => {
    const dates = []
    const today = new Date()
    for (let i = 1; i <= 7; i++) {
      const date = new Date(today)
      date.setDate(today.getDate() + i)
      dates.push(date)
    }
    return dates
  }

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('en-PK', { weekday: 'short', month: 'short', day: 'numeric' })
  }

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-dark font-medium mb-2 text-sm flex items-center gap-2">
          <Calendar size={16} className="text-primary" />
          Select Delivery Date
        </label>
        <div className="grid grid-cols-4 gap-2">
          {getDates().map((date) => (
            <button
              key={date.toISOString()}
              onClick={() => setSelectedDate(date.toISOString())}
              className={`p-2 text-center rounded-lg border transition-all ${
                selectedDate === date.toISOString()
                  ? 'border-primary bg-primary/10 text-primary font-medium'
                  : 'border-gray-200 text-dark hover:border-primary'
              }`}
            >
              <div className="text-xs">{formatDate(date)}</div>
            </button>
          ))}
        </div>
      </div>

      <div>
        <label className="block text-dark font-medium mb-2 text-sm flex items-center gap-2">
          <Clock size={16} className="text-primary" />
          Select Time Slot
        </label>
        <div className="grid grid-cols-2 gap-3">
          {timeSlots.map((slot) => (
            <button
              key={slot.id}
              onClick={() => setSelectedSlot(slot.id)}
              className={`p-3 text-center rounded-lg border transition-all ${
                selectedSlot === slot.id
                  ? 'border-primary bg-primary/10 text-primary'
                  : 'border-gray-200 text-dark hover:border-primary'
              }`}
            >
              <div className="font-medium text-sm">{slot.label}</div>
              <div className="text-xs text-gray-custom">{slot.time}</div>
            </button>
          ))}
        </div>
      </div>

      <button
        onClick={handleSubmit}
        disabled={!selectedDate || !selectedSlot}
        className="w-full mt-2 bg-gradient-primary text-white py-2 rounded-lg text-sm font-medium disabled:opacity-50 transition"
      >
        Confirm Schedule
      </button>
    </div>
  )
}