'use client'

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

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

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 [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
  }

  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">
            <p className="text-sm font-semibold text-gray-900">{site.name}</p>
            {site.address && <p className="text-xs text-gray-400">{site.address}</p>}
            {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">
                    <span>{z.name}</span>
                    <a
                      href={`/ims/report?zone=${z.qr_code_token}`}
                      target="_blank"
                      className="text-xs text-blue-600 hover:underline"
                    >
                      Report link / QR target
                    </a>
                  </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>
  )
}