import { QRCodeSVG } from 'qrcode.react';
import { Link, useParams } from 'react-router-dom';
import { useAsset } from '@/api/referentiel';
import { Button } from '@/components/ui/button';

/** Écran 5 des maquettes R1 : l'étiquette A6 imprimable — objet PAPIER
 *  (noir sur blanc, même en thème sombre). window.print n'imprime qu'elle. */
export default function PageEtiquette() {
  const { id } = useParams<{ id: string }>();
  const { data: asset } = useAsset(id);
  if (!asset) return null;

  const url = `${window.location.origin}/q/${asset.reference}`;

  return (
    <>
      <div className="filajout">
        <Link to="/ascenseurs">Ascenseurs</Link> /{' '}
        <Link to={`/ascenseurs/${asset.id}`}>Ascenseur {asset.reference}</Link> / Étiquette QR
      </div>
      <div className="entete-page">
        <h1>Étiquette cabine — Ascenseur {asset.reference}</h1>
        <div className="actions">
          <Button variant="prim" onClick={() => window.print()}>
            Imprimer (A6)
          </Button>
        </div>
      </div>
      <div className="zone-impression">
        <div className="etiquette">
          <div className="tete">
            <span className="marque" aria-hidden="true">▲<br />▼</span>
            <b>SIOP</b>
            <span style={{ marginLeft: 'auto', fontSize: 11, color: '#55647a' }}>
              Maintenance d'ascenseurs
              <br />
              SPELEV
            </span>
          </div>
          <div className="corps">
            <QRCodeSVG className="qr-grand" value={url} size={120} marginSize={1} />
            <div>
              <h3>Ascenseur {asset.reference}</h3>
              <div className="ou">
                {asset.siteName}
                <br />
                {asset.locationName !== asset.siteName ? `${asset.locationName} — ` : ''}
                {asset.brand} {asset.model ?? ''}
              </div>
            </div>
          </div>
          <div className="consigne">
            Un problème ? Une personne bloquée ?
            <br />
            📱 Scannez ce code pour signaler
          </div>
          <div className="ref">
            SIOP · {asset.reference}
            {asset.serialNumber ? ` · ${asset.serialNumber}` : ''} · {url.replace(/^https?:\/\//, '')}
          </div>
        </div>
        <div className="carte" style={{ flex: 1, minWidth: 260 }}>
          <h2>Ce que fait le scan</h2>
          <dl className="infos" style={{ gridTemplateColumns: '96px 1fr' }}>
            <dt>Gardien</dt>
            <dd>ouvrira le <b>portail de signalement</b>, équipement prérempli (R2)</dd>
            <dt>Technicien</dt>
            <dd>connecté → ouvre la <b>fiche de l'appareil</b></dd>
            <dt>Impression</dt>
            <dd>A6 autocollant, noir sur blanc</dd>
          </dl>
        </div>
      </div>
    </>
  );
}