'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export type Truck = {
  id: string
  truck_no: string
  carrier: string | null
  active: boolean
}

interface Props {
  trucks: Truck[]
}

export function TruckManager({ trucks }: Props) {
  const router = useRouter()
  const [truckNo, setTruckNo] = useState('')
  const [carrier, setCarrier] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleAdd() {
    const no = truckNo.trim()
    if (!no) return
    setSubmitting(true)
    setError(null)
    try {
      const res = await fetch('/ims/api/admin/trucks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ truck_no: no, carrier: carrier.trim() || null }),
      })
      const data = await res.json()
      if (!res.ok) {
        setError(data.error ?? 'Failed to add truck')
        return
      }
      setTruckNo('')
      setCarrier('')
      router.refresh()
    } catch {
      setError('Network error')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
      <div className="px-5 py-4 border-b border-gray-100">
        <h2 className="text-sm font-semibold text-gray-900">Trucks</h2>
      </div>

      <div className="px-5 py-4 space-y-3">
        <div className="flex gap-2">
          <input
            type="text"
            placeholder="Truck number (e.g. WXY 1234)"
            className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={truckNo}
            onChange={e => setTruckNo(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleAdd()}
          />
          <input
            type="text"
            placeholder="Carrier (optional)"
            className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={carrier}
            onChange={e => setCarrier(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleAdd()}
          />
          <button
            onClick={handleAdd}
            disabled={submitting || !truckNo.trim()}
            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {submitting ? 'Adding…' : 'Add'}
          </button>
        </div>

        {error && (
          <p className="text-xs text-red-600">{error}</p>
        )}

        {trucks.length === 0 ? (
          <p className="text-sm text-gray-400 py-2">No trucks yet.</p>
        ) : (
          <ul className="divide-y divide-gray-100">
            {trucks.map(tk => (
              <li key={tk.id} className="flex items-center gap-3 py-2">
                <span className="text-sm font-medium text-gray-900">{tk.truck_no}</span>
                {tk.carrier && (
                  <span className="text-xs text-gray-500">{tk.carrier}</span>
                )}
                {!tk.active && (
                  <span className="ml-auto text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">
                    Inactive
                  </span>
                )}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}