import { Link } from 'react-router-dom'
import { useSession } from '@/store/session'
import { cn } from '@/lib/utils'

export interface OpenYourNodeProps {
  /** 'hero' is the big primary CTA used on the setup page; 'inline' is a compact
   *  link for reuse inside later module pages. */
  variant?: 'hero' | 'inline'
  className?: string
}

/**
 * Reusable "Open your node" call-to-action. Opens the board's LAN ZeroClaw
 * dashboard (device.nodeUrl) in a new tab. When the board isn't claimed yet it
 * shows an amber prompt back to team registration instead.
 */
export function OpenYourNode({ variant = 'hero', className }: OpenYourNodeProps) {
  const device = useSession((s) => s.device)
  const canOpen = device.connected && !!device.nodeUrl

  if (!canOpen) {
    return (
      <div
        className={cn(
          'border border-amber/40 bg-amber/5 rounded-md px-4 py-3 text-sm',
          className,
        )}
      >
        No node yet — <Link to="/workshop" className="underline font-medium">claim your board first</Link>.
      </div>
    )
  }

  if (variant === 'inline') {
    return (
      <a
        href={device.nodeUrl!}
        target="_blank"
        rel="noopener noreferrer"
        className={cn(
          'inline-flex items-center gap-1 font-mono text-[11px] text-primary hover:underline tracking-widest uppercase',
          className,
        )}
      >
        Open your node →
      </a>
    )
  }

  return (
    <a
      href={device.nodeUrl!}
      target="_blank"
      rel="noopener noreferrer"
      className={cn(
        'group flex items-center justify-between gap-4 rounded-lg border border-primary/40 bg-primary/5 px-6 py-5 transition-colors hover:bg-primary/10',
        className,
      )}
    >
      <div>
        <div className="flex items-center gap-2">
          <span className="text-xl font-bold tracking-tight">Open your node →</span>
          <span className="font-mono text-[9px] uppercase tracking-widest text-teal border border-teal/40 bg-teal/10 rounded px-1.5 py-0.5">
            Connected
          </span>
        </div>
        <div className="font-mono text-[10px] text-muted-foreground mt-1 truncate max-w-xs">
          {device.port ? `${device.port} · ` : ''}{device.nodeUrl}
        </div>
      </div>
      <span className="w-2.5 h-2.5 rounded-full bg-teal animate-pulse shrink-0" aria-hidden />
    </a>
  )
}