'use client'

import { useState } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { stateName } from '@/lib/domain/states'
import { getStateInfo, STATE_INFO_TOPICS } from '@/lib/demo/state-info'

/**
 * Internal state notes — the per-state knowledge the team shares with drivers.
 *
 * Nash, 2026-09-12: "we have a button to view permit. We should have a button
 * to view permit, view provisions, and view… state notes… three small
 * clickable text… we do have internal state notes that we will be sharing and
 * displaying for the drivers. And it's kind of important for the pilot car
 * driver to see that also."
 *
 * One content component for the trip workspace's state-info panel, the carrier
 * driver's Active Trip and the pilot driver's Active Assignment, so the notes
 * read the same everywhere. Content is the sample state knowledge until the
 * internal state-data backend connects.
 */
export function StateInfoContent({ code }: { code: string }) {
  const [topic, setTopic] = useState<(typeof STATE_INFO_TOPICS)[number]>('Travel info')
  const info = getStateInfo(code)
  return (
    <>
      {/* Topics WRAP instead of scrolling sideways: in a 340px panel the last
          topics were off-screen with no visible scrollbar — Nash: "I can't
          navigate inside this carousel" (Task 65). */}
      <div className="flex flex-wrap gap-1 border-b bg-white px-2 py-1.5">
        {STATE_INFO_TOPICS.map((t) => (
          <button
            key={t}
            onClick={() => setTopic(t)}
            className={`shrink-0 rounded-full px-3 py-1.5 text-xs font-semibold transition ${
              t === topic ? 'bg-[#0f1b2d] text-white' : 'text-neutral-500 hover:text-neutral-900'
            }`}
          >
            {t}
          </button>
        ))}
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto p-4">
        <p className="text-sm leading-relaxed text-neutral-700">{info[topic]}</p>
        <p className="mt-4 text-[11px] text-neutral-400">
          Sample data — the internal state knowledge connects with the backend.
        </p>
      </div>
    </>
  )
}

/** "View state notes" popup for the driver screens. `code` null = closed. */
export function StateNotesDialog({ code, onClose }: { code: string | null; onClose: () => void }) {
  return (
    <Dialog open={!!code} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0">
        <DialogHeader className="border-b px-4 py-3">
          <DialogTitle>{code ? stateName(code) || code : ''} — state notes</DialogTitle>
        </DialogHeader>
        {code && <StateInfoContent code={code} />}
      </DialogContent>
    </Dialog>
  )
}