'use client'

import { useState } from 'react'
import { toast } from 'sonner'

/**
 * Route line on a shared permit. Nash, 2026-09-13: when the route is ready the
 * delivered formats (Google Maps parts, GPX, Hummer GPS) are displayed by
 * default; clicking "Route ready" hides them, clicking again shows them.
 * Demo formats until the pilot backend exists.
 */
export function RouteStatusLine({ route, compact = false }: { route: 'ready' | 'requested' | null; compact?: boolean }) {
  const [open, setOpen] = useState(true)
  if (route === 'requested') return <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 ring-1 ring-inset ring-blue-200">Route requested</span>
  if (route !== 'ready') {
    return (
      <button onClick={() => toast.success("Preview: Express Route ordered under the trip's payment rules")} className="rounded-full bg-amber-brand px-2 py-0.5 text-[10px] font-bold text-navy-950 hover:bg-amber-deep">
        Use 1 Express Route credit · 1 left
      </button>
    )
  }
  return (
    <div className={compact ? 'flex flex-wrap items-center gap-1.5' : 'mt-1'}>
      <button
        onClick={() => setOpen((v) => !v)}
        className="rounded-full bg-ok-bg px-2 py-0.5 text-[10px] font-bold text-ok ring-1 ring-inset ring-green-200 hover:bg-green-100"
        title="Show or hide the delivered route formats"
      >
        ✓ Route ready · 2 parts
      </button>
      {open && (
        <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
          {['Google Maps · Part 1', 'Google Maps · Part 2', 'GPX file', 'Hummer GPS'].map((f) => (
            <button key={f} onClick={() => toast.success(`Preview: ${f} would open here`)} className="rounded-md bg-white px-2 py-0.5 text-[10px] font-bold text-info ring-1 ring-neutral-200 hover:ring-info">
              {f}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}