// frontend/src/components/shared/CopyableSerial.jsx
// Serial number display with click-to-copy — the whole text is clickable,
// not just the trailing icon, and the icon stays dimly visible at rest so
// its affordance isn't hover-only-discoverable (it was previously opacity:0
// at rest via an inline style, which beat the hover CSS rule and made the
// button invisible at all times).

import { useState } from 'react'
import Icon from '@/components/ui/Icon'

function copyText(text, onDone) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(onDone).catch(() => {
      const ta = document.createElement('textarea')
      ta.value = text; ta.style.cssText = 'position:fixed;opacity:0'
      document.body.appendChild(ta); ta.select()
      try { document.execCommand('copy'); onDone() } catch { /* clipboard unavailable */ }
      document.body.removeChild(ta)
    })
  }
}

export default function CopyableSerial({ serial, className = '', style = {}, textStyle = {}, iconSize = 12 }) {
  const [copied, setCopied] = useState(false)

  if (!serial) return <span className={className} style={{ ...textStyle, ...style }}>—</span>

  const handleCopy = () => {
    copyText(serial, () => { setCopied(true); setTimeout(() => setCopied(false), 1500) })
  }

  return (
    <button
      type="button"
      onClick={handleCopy}
      title={copied ? 'Copied!' : 'Click to copy serial number'}
      aria-label={copied ? 'Serial number copied' : 'Copy serial number'}
      className={['copyable-serial', className].filter(Boolean).join(' ')}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 'var(--space-1)',
        padding: 0,
        border: 'none',
        background: 'none',
        cursor: 'pointer',
        font: 'inherit',
        color: 'inherit',
        ...style,
      }}
    >
      <span style={textStyle}>{serial}</span>
      <Icon
        name={copied ? 'check' : 'copy'}
        size={iconSize}
        color={copied ? 'var(--color-success)' : 'currentColor'}
        className="copyable-serial__icon"
      />
      <style>{`
        .copyable-serial .copyable-serial__icon {
          opacity: 0.45;
          transition: opacity 0.15s, color 0.15s;
        }
        .copyable-serial:hover .copyable-serial__icon,
        .copyable-serial:focus-visible .copyable-serial__icon {
          opacity: 1;
        }
      `}</style>
    </button>
  )
}