ims/components/admin/site-zone-manager.tsx

'use client'

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

export type SiteWithZones = {
  id: string
  name: string
  address: string | null
  active: boolean
  zones: Array<{ id: string; name: string; qr_code_token: string; active: boolean }>
}

interface Props {
  sites: SiteWithZones[]
}

export function SiteZoneManager({ sites }: Props) {
  const router = useRouter()
  const [siteName, setSiteName] = useState('')
  const [zoneName, setZoneName] = useState('')
  const [zoneSiteId, setZoneSiteId] = useState('')
  const [busy, setBusy] = useState(false)
  const [busyId, setBusyId] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  const post = async (payload: Record<string, unknown>) => {
    setBusy(true)
    setError(null)
    const res = await fetch('/ims/api/admin/sites', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
    setBusy(false)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? 'Save failed')
      return false
    }
    router.refresh()
    return true
  }

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

  return (
    <div className="bg-white rounded-xl shadow-sm p-5">
      <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Sites & Zones</h2>

      <div className="flex flex-wrap gap-2 mb-3">
        <input
          type="text" placeholder="New site name"
          value={siteName}
          onChange={e => setSiteName(e.target.value)}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
        />
        <button
          disabled={busy || !siteName.trim()}
          onClick={async () => { if (await post({ kind: 'site', name: siteName })) setSiteName('') }}
          className="bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900 disabled:opacity-50"
        >
          Add Site
        </button>
      </div>

      <div className="flex flex-wrap gap-2 mb-5">
        <select
          value={zoneSiteId}
          onChange={e => setZoneSiteId(e.target.value)}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
        >
          <option value="">Select site…</option>
          {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
        </select>
        <input
          type="text" placeholder="New zone name"
          value={zoneName}
          onChange={e => setZoneName(e.target.value)}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
        />
        <button
          disabled={busy || !zoneName.trim() || !zoneSiteId}
          onClick={async () => { if (await post({ kind: 'zone', name: zoneName, site_id: zoneSiteId })) setZoneName('') }}
          className="bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700 disabled:opacity-50"
        >
          Add Zone
        </button>
      </div>

      {error && <p className="text-sm text-red-600 mb-3">{error}</p>}

      <div className="space-y-4">
        {sites.map(site => (
          <div
            key={site.id}
            className={`border border-gray-100 rounded-lg p-3 transition-opacity ${!site.active ? 'opacity-50' : ''}`}
          >
            <div className="flex items-center justify-between gap-2">
              <div>
                <p className="text-sm font-semibold text-gray-900">{site.name}</p>
                {site.address && <p className="text-xs text-gray-400">{site.address}</p>}
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <button
                  disabled={busyId === site.id}
                  onClick={() => send('PATCH', { kind: 'site', id: site.id, active: !site.active })}
                  className={`text-xs font-medium px-2 py-1 rounded-full border transition-colors disabled:opacity-50 ${
                    site.active
                      ? 'border-green-300 text-green-700 hover:bg-green-50'
                      : 'border-gray-300 text-gray-500 hover:bg-gray-50'
                  }`}
                >
                  {site.active ? 'Active' : 'Deactivated'}
                </button>
                <button
                  disabled={busyId === site.id}
                  onClick={async () => {
                    if (window.confirm(`Delete site "${site.name}"? This cannot be undone.`))
                      await send('DELETE', { kind: 'site', id: site.id })
                  }}
                  className="text-xs text-red-600 hover:underline disabled:opacity-50"
                >
                  Delete
                </button>
              </div>
            </div>

            {site.zones.length > 0 ? (
              <ul className="mt-2 space-y-1">
                {site.zones.map(z => (
                  <li
                    key={z.id}
                    className={`flex items-center justify-between text-sm text-gray-600 transition-opacity ${!z.active ? 'opacity-50' : ''}`}
                  >
                    <span>{z.name}</span>
                    <div className="flex items-center gap-3">
                      <a
                        href={`/report?zone=${z.qr_code_token}`}
                        target="_blank"
                        className="text-xs text-blue-600 hover:underline"
                      >
                        Report link / QR target
                      </a>
                      <button
                        disabled={busyId === z.id}
                        onClick={() => send('PATCH', { kind: 'zone', id: z.id, active: !z.active })}
                        className={`text-xs font-medium px-2 py-0.5 rounded-full border transition-colors disabled:opacity-50 ${
                          z.active
                            ? 'border-green-300 text-green-700 hover:bg-green-50'
                            : 'border-gray-300 text-gray-500 hover:bg-gray-50'
                        }`}
                      >
                        {z.active ? 'Active' : 'Deactivated'}
                      </button>
                      <button
                        disabled={busyId === z.id}
                        onClick={async () => {
                          if (window.confirm(`Delete zone "${z.name}"? This cannot be undone.`))
                            await send('DELETE', { kind: 'zone', id: z.id })
                        }}
                        className="text-xs text-red-600 hover:underline disabled:opacity-50"
                      >
                        Delete
                      </button>
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-xs text-gray-400 mt-1">No zones</p>
            )}
          </div>
        ))}
        {sites.length === 0 && <p className="text-sm text-gray-400">No sites yet</p>}
      </div>
    </div>
  )
}