'use client'

import { useState } from 'react'
import AddressPickerModal from './AddressPickerModal'

interface DeliveryFormProps {
  onAddDelivery: (delivery: { recipient: string; address: string; lat: number; lng: number }) => void
}

export default function DeliveryForm({ onAddDelivery }: DeliveryFormProps) {
  const [recipient, setRecipient] = useState('')
  const [showMapPicker, setShowMapPicker] = useState(false)
  const [error, setError] = useState('')
  const [pendingLocation, setPendingLocation] = useState<{
    address: string
    lat: number
    lng: number
  } | null>(null)

  const handleOpenMapPicker = () => {
    if (!recipient.trim()) {
      setError('Nama penerima harus diisi terlebih dahulu')
      return
    }
    setError('')
    setShowMapPicker(true)
  }

  const handleLocationConfirm = (address: string, lat: number, lng: number) => {
    setPendingLocation({ address, lat, lng })
    setShowMapPicker(false)
    setError('')
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!recipient.trim()) {
      setError('Nama penerima harus diisi')
      return
    }

    if (!pendingLocation) {
      setError('Lokasi pengantaran harus dipilih dari peta')
      return
    }

    onAddDelivery({
      recipient: recipient.trim(),
      address: pendingLocation.address,
      lat: pendingLocation.lat,
      lng: pendingLocation.lng,
    })

    setRecipient('')
    setPendingLocation(null)
  }

  return (
    <div className="bg-gray-800 rounded-xl border border-gray-700 p-3 sm:p-4">
      <h2 className="text-base sm:text-lg font-bold text-white mb-3">Tambah Pengantaran</h2>

      <form onSubmit={handleSubmit} className="space-y-3">
        <div>
          <label className="block text-xs text-gray-400 mb-1">Nama Penerima</label>
          <input
            type="text"
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            placeholder="Contoh: Pak Budi"
            className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-blue-500"
          />
        </div>

        <div>
          <label className="block text-xs text-gray-400 mb-1">Lokasi Pengantaran</label>
          <button
            type="button"
            onClick={handleOpenMapPicker}
            className="w-full px-3 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm hover:border-blue-500 transition-colors text-left flex items-center gap-2"
          >
            <span className="text-lg">📍</span>
            <span className={pendingLocation ? 'text-gray-300' : 'text-gray-500'}>
              {pendingLocation ? '✓ Lokasi sudah dipilih' : 'Klik untuk pilih lokasi di peta'}
            </span>
          </button>
          {pendingLocation && (
            <p className="text-xs text-gray-500 mt-1.5 line-clamp-2">
              {pendingLocation.address}
            </p>
          )}
        </div>

        {error && (
          <div className="text-sm text-red-400 bg-red-900/20 border border-red-800 rounded-lg px-3 py-2">
            {error}
          </div>
        )}

        <button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 sm:py-2.5 px-4 rounded-lg transition-colors text-sm"
        >
          + Tambah ke Daftar Pengantaran
        </button>
      </form>

      <AddressPickerModal
        isOpen={showMapPicker}
        onClose={() => setShowMapPicker(false)}
        onConfirm={handleLocationConfirm}
      />
    </div>
  )
}