import { useState } from 'react'
import { Button } from '@overdeck/deck-ui'

/** The exact command that reconnects to a session, with the directory it must run in.
 * Shown verbatim so it can be read off the screen when the clipboard is refused. */
export function ResumeCommand({
  command,
  cwd,
  heading,
  note,
}: {
  command: string
  cwd: string
  heading: string
  note?: string
}) {
  const [copied, setCopied] = useState<'idle' | 'done' | 'failed'>('idle')
  const full = `cd ${cwd} && ${command}`

  async function copy(): Promise<void> {
    try {
      await navigator.clipboard.writeText(full)
      setCopied('done')
    } catch {
      setCopied('failed')
    }
  }

  return (
    <div className="flex flex-col gap-1.5 rounded-md border border-border bg-surface-raised p-2">
      <p className="text-[11px] font-semibold uppercase tracking-wider text-fg-subtle">{heading}</p>
      <code className="block overflow-x-auto whitespace-pre text-[12px] text-fg">{full}</code>
      {note ? <p className="text-[11px] text-warning">{note}</p> : null}
      <div className="flex items-center gap-2">
        <Button size="sm" variant="outline" tone="neutral" onClick={copy}>Copy command</Button>
        {copied === 'done' ? <span className="text-[11px] text-success">Copied</span> : null}
        {copied === 'failed' ? <span className="text-[11px] text-warning">Clipboard blocked — select the text above</span> : null}
      </div>
    </div>
  )
}