ims/components/admin/truck-manager.tsx

'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 [busyId, setBusyId] = useState<string | null>(null)
  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)
    }
  }

  const send = async (method: 'PATCH' | 'DELETE', payload: Record<string, unknown>) => {
    const id = payload.id as string
    setBusyId(id)
    setError(null)
    try {
      const res = await fetch('/ims/api/admin/trucks', {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? 'Action failed')
        return false
      }
      router.refresh()
      return true
    } catch {
      setError('Network error')
      return false
    } finally {
      setBusyId(null)
    }
  }

  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 justify-between py-2 transition-opacity ${!tk.active ? 'opacity-50' : ''}`}
              >
                <div className="flex items-center gap-3">
                  <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>
                  )}
                </div>
                <div className="flex items-center gap-3">
                  <a
                    href={`/report?truck_id=${tk.id}`}
                    target="_blank"
                    className="text-xs text-blue-600 hover:underline"
                  >
                    Report link / QR target
                  </a>
                  <button
                    disabled={busyId === tk.id}
                    onClick={() => send('PATCH', { id: tk.id, active: !tk.active })}
                    className={`text-xs font-medium px-2 py-0.5 rounded-full border transition-colors disabled:opacity-50 ${
                      tk.active
                        ? 'border-green-300 text-green-700 hover:bg-green-50'
                        : 'border-gray-300 text-gray-500 hover:bg-gray-50'
                    }`}
                  >
                    {tk.active ? 'Active' : 'Deactivated'}
                  </button>
                  <button
                    disabled={busyId === tk.id}
                    onClick={async () => {
                      if (window.confirm(`Delete truck "${tk.truck_no}"? This cannot be undone.`))
                        await send('DELETE', { id: tk.id })
                    }}
                    className="text-xs text-red-600 hover:underline disabled:opacity-50"
                  >
                    Delete
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}