/* global React, tt */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- Icons (lightweight inline SVGs) ----------
const Icon = ({ name, size = 24, stroke = 2, className = "" }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", className,
  };
  switch (name) {
    case "calendar":
      return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>);
    case "calendar-check":
      return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4"/></svg>);
    case "stethoscope":
      return (<svg {...props}><path d="M6 3v6a4 4 0 0 0 8 0V3"/><path d="M10 13v3a4 4 0 0 0 4 4 4 4 0 0 0 4-4v-2"/><circle cx="18" cy="11" r="2"/></svg>);
    case "alert":
      return (<svg {...props}><path d="M12 3 2 21h20Z"/><path d="M12 10v5M12 18h.01"/></svg>);
    case "document":
      return (<svg {...props}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg>);
    case "flask":
      return (<svg {...props}><path d="M9 3h6M10 3v6L4 19a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-10V3"/><path d="M7 14h10"/></svg>);
    case "user":
      return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>);
    case "check":
      return (<svg {...props}><path d="M5 12l5 5L20 7"/></svg>);
    case "check-circle":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></svg>);
    case "x":
      return (<svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>);
    case "x-circle":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>);
    case "arrow-left":
      return (<svg {...props}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>);
    case "arrow-right":
      return (<svg {...props}><path d="M5 12h14M12 5l7 7-7 7"/></svg>);
    case "printer":
      return (<svg {...props}><path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>);
    case "shield":
      return (<svg {...props}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg>);
    case "shield-off":
      return (<svg {...props}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="M3 3l18 18"/></svg>);
    case "clock":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "user-md":
      return (<svg {...props}><circle cx="12" cy="7" r="3"/><path d="M6 21v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3"/><path d="M9 14l3 4 3-4"/></svg>);
    case "hash":
      return (<svg {...props}><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>);
    case "backspace":
      return (<svg {...props}><path d="M22 5H8L2 12l6 7h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/><path d="M18 9l-6 6M12 9l6 6"/></svg>);
    case "wifi":
      return (<svg {...props}><path d="M5 12.55a11 11 0 0 1 14 0M8.5 16.05a6 6 0 0 1 7 0M12 19.5h.01M2 8.82a16 16 0 0 1 20 0"/></svg>);
    case "qr":
      return (<svg {...props}><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="3" width="6" height="6" rx="1"/><rect x="3" y="15" width="6" height="6" rx="1"/><path d="M15 15h2v2h-2zM19 15h2M15 19h2v2h-2zM19 19h2v2"/></svg>);
    case "spark":
      return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>);
    case "heart":
      return (<svg {...props}><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg>);
    case "info":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg>);
    default:
      return (<svg {...props}><circle cx="12" cy="12" r="9"/></svg>);
  }
};

// ---------- Logo mark ----------
const TotemLogo = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#tlg)"/>
    <path d="M16 8v16M8 16h16" stroke="white" strokeWidth="3" strokeLinecap="round"/>
    <defs>
      <linearGradient id="tlg" x1="0" y1="0" x2="32" y2="32">
        <stop stopColor="#5DD3FF"/>
        <stop offset="1" stopColor="#1E90FF"/>
      </linearGradient>
    </defs>
  </svg>
);

// ---------- Numeric keypad (kiosk-style) ----------
function NumericKeypad({ onPress, onBackspace, onClear, disabled }) {
  const keys = ["1","2","3","4","5","6","7","8","9","clear","0","back"];
  return (
    <div className="keypad">
      {keys.map((k, i) => {
        if (k === "clear") return (
          <button key={i} className="key key-fn" onClick={onClear} disabled={disabled}>C</button>
        );
        if (k === "back") return (
          <button key={i} className="key key-fn" onClick={onBackspace} disabled={disabled}>
            <Icon name="backspace" size={28} />
          </button>
        );
        return (
          <button key={i} className="key" onClick={() => onPress(k)} disabled={disabled}>{k}</button>
        );
      })}
      <style>{`
        .keypad {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
          width: 380px;
        }
        .key {
          height: 88px;
          font-size: 36px;
          font-weight: 600;
          font-family: 'Inter', sans-serif;
          color: white;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 16px;
          cursor: pointer;
          transition: all 0.12s;
          display: grid; place-items: center;
          font-variant-numeric: tabular-nums;
        }
        .key:hover:not([disabled]) {
          background: rgba(255,255,255,0.10);
          border-color: rgba(255,255,255,0.20);
        }
        .key:active:not([disabled]) { transform: scale(0.96); background: rgba(30,144,255,0.18); }
        .key-fn { font-size: 22px; color: #8A93A6; }
        .key[disabled] { opacity: 0.4; cursor: not-allowed; }
      `}</style>
    </div>
  );
}

// ---------- DNI display ----------
function DniDisplay({ value, error, max = 10 }) {
  // Show enough slots for DNI (8) or CPF (11)
  const minSlots = Math.min(Math.max(max, 8), 11);
  const slotCount = Math.max(minSlots, value.length, max === 11 ? 11 : 8);
  const slots = Array.from({length: slotCount}, (_, i) => value[i] || "");
  const compact = slotCount >= 11;
  return (
    <div className={"dni-display " + (error ? "shake" : "")}>
      <div className="dni-slots">
        {slots.map((c, i) => (
          <div key={i} className={"dni-slot" + (c ? " filled" : "") + (compact ? " compact" : "")}>
            {c || <span className="dni-cursor">{i === value.length ? "" : ""}</span>}
          </div>
        ))}
      </div>
      <style>{`
        .dni-display { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
        .dni-slots { display: flex; gap: 10px; flex-wrap: nowrap; }
        .dni-slot {
          width: 48px; height: 64px;
          border-radius: 12px;
          border: 1px solid rgba(255,255,255,0.10);
          background: rgba(255,255,255,0.03);
          display: grid; place-items: center;
          font-size: 32px; font-weight: 600;
          font-family: 'Inter', sans-serif;
          font-variant-numeric: tabular-nums;
          color: white;
          transition: all 0.15s;
        }
        .dni-slot.filled {
          background: rgba(30,144,255,0.10);
          border-color: rgba(30,144,255,0.55);
          box-shadow: 0 4px 14px -4px rgba(30,144,255,0.4);
        }
        .dni-slot.compact {
          width: 36px; height: 54px; font-size: 22px; gap: 0;
        }
        .dni-slots:has(.compact) { gap: 6px; }
      `}</style>
    </div>
  );
}

// ---------- Action card (used in flow picker) ----------
function ActionCard({ icon, title, subtitle, badge, onClick, accent }) {
  return (
    <button className="action-card card-tap" onClick={onClick}>
      <div className="action-icon" style={{ background: accent }}>
        <Icon name={icon} size={42} stroke={1.6} />
      </div>
      <div className="action-text">
        <div className="action-title">{title}</div>
        <div className="action-sub">{subtitle}</div>
      </div>
      {badge && <span className="action-badge">{badge}</span>}
      <Icon name="arrow-right" size={28} className="action-arrow" />
      <style>{`
        .action-card {
          appearance: none;
          width: 100%;
          text-align: left;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 18px;
          padding: 18px 24px;
          display: flex; align-items: center; gap: 22px;
          cursor: pointer;
          color: white;
          transition: all 0.2s;
          position: relative;
          font-family: inherit;
        }
        .action-card:hover {
          background: rgba(255,255,255,0.07);
          border-color: rgba(30,144,255,0.45);
          transform: translateY(-3px);
          box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6);
        }
        .action-card:active { transform: translateY(-1px); }
        .action-icon {
          width: 64px; height: 64px;
          border-radius: 16px;
          display: grid; place-items: center;
          color: white;
          flex: 0 0 auto;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
        }
        .action-title {
          font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
          line-height: 1.2; margin-bottom: 2px;
        }
        .action-sub {
          font-size: 14px; color: #C7CCD9; line-height: 1.35;
        }
        .action-text { flex: 1 1 auto; }
        .action-arrow { color: rgba(255,255,255,0.4); }
        .action-card:hover .action-arrow { color: white; transform: translateX(4px); transition: all 0.15s; }
        .action-badge {
          position: absolute; top: 18px; right: 24px;
          background: rgba(255,212,121,0.12);
          color: #FFD479;
          border: 1px solid rgba(255,212,121,0.3);
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          font-weight: 600;
        }
      `}</style>
    </button>
  );
}

// ---------- Appointment card ----------
function AppointmentCard({ appt, selected, onClick, compact }) {
  return (
    <button className={"appt-card " + (selected ? "appt-selected " : "") + (compact ? "appt-compact" : "")} onClick={onClick}>
      <div className="appt-time">
        <Icon name="clock" size={16} />
        <span>{appt.time}</span>
      </div>
      <div className="appt-main">
        <div className="appt-doctor">{appt.doctorName}</div>
        <div className="appt-spec">{appt.specialty}</div>
      </div>
      <div className="appt-meta">
        <div className="appt-room">{appt.room}</div>
        <div className="appt-duration">{appt.duration} min</div>
      </div>
      {selected && <div className="appt-check"><Icon name="check" size={20} stroke={3}/></div>}
      <style>{`
        .appt-card {
          appearance: none; font-family: inherit;
          width: 100%;
          display: grid;
          grid-template-columns: 110px 1fr auto;
          align-items: center;
          gap: 28px;
          padding: 22px 26px;
          background: rgba(255,255,255,0.04);
          border: 1.5px solid rgba(255,255,255,0.10);
          border-radius: 18px;
          cursor: pointer;
          color: white;
          text-align: left;
          transition: all 0.18s;
          position: relative;
        }
        .appt-card:hover {
          background: rgba(255,255,255,0.07);
          border-color: rgba(30,144,255,0.4);
        }
        .appt-selected {
          background: rgba(30,144,255,0.10) !important;
          border-color: var(--t-primary) !important;
          box-shadow: 0 0 0 3px rgba(30,144,255,0.15);
        }
        .appt-time {
          display: flex; align-items: center; gap: 10px;
          font-size: 32px; font-weight: 700;
          font-variant-numeric: tabular-nums;
          letter-spacing: -0.01em;
          color: #5DD3FF;
        }
        .appt-time svg { color: rgba(93,211,255,0.6); }
        .appt-doctor { font-size: 22px; font-weight: 600; line-height: 1.2; }
        .appt-spec { font-size: 16px; color: #8A93A6; margin-top: 4px; }
        .appt-meta {
          text-align: right;
        }
        .appt-room {
          display: inline-block;
          font-size: 14px; font-weight: 600;
          padding: 4px 10px;
          border-radius: 8px;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.1);
          letter-spacing: 0.04em;
        }
        .appt-duration { font-size: 13px; color: #8A93A6; margin-top: 6px; }
        .appt-check {
          position: absolute; top: -8px; right: -8px;
          width: 32px; height: 32px;
          background: var(--t-primary);
          border-radius: 50%;
          display: grid; place-items: center;
          color: white;
          box-shadow: 0 4px 12px rgba(30,144,255,0.5);
        }
      `}</style>
    </button>
  );
}

// ---------- Lab order row ----------
function LabOrderCard({ order, selected, onToggle }) {
  return (
    <button className={"lab-card " + (selected ? "lab-selected" : "")} onClick={onToggle}>
      <div className="lab-check">
        {selected
          ? <div className="lab-check-on"><Icon name="check" size={18} stroke={3}/></div>
          : <div className="lab-check-off"/>}
      </div>
      <div className="lab-icon"><Icon name="flask" size={24} /></div>
      <div className="lab-main">
        <div className="lab-type">{order.studyType}</div>
        <div className="lab-meta">{order.requestedBy} · {typeof tt === 'function' ? tt('lab.requested') : ''} {order.date}</div>
      </div>
      <span className="lab-status">{typeof tt === 'function' ? tt('lab.ready') : 'Listo'}</span>
      <style>{`
        .lab-card {
          appearance: none; font-family: inherit;
          width: 100%;
          display: grid;
          grid-template-columns: 32px 56px 1fr auto;
          align-items: center;
          gap: 18px;
          padding: 18px 22px;
          background: rgba(255,255,255,0.04);
          border: 1.5px solid rgba(255,255,255,0.10);
          border-radius: 16px;
          cursor: pointer;
          color: white;
          text-align: left;
          transition: all 0.18s;
        }
        .lab-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
        .lab-selected {
          background: rgba(30,144,255,0.10);
          border-color: var(--t-primary);
        }
        .lab-check-off, .lab-check-on {
          width: 28px; height: 28px; border-radius: 8px;
          display: grid; place-items: center;
        }
        .lab-check-off { border: 2px solid rgba(255,255,255,0.25); }
        .lab-check-on {
          background: var(--t-primary);
          color: white;
          box-shadow: 0 0 14px rgba(30,144,255,0.6);
        }
        .lab-icon {
          width: 56px; height: 56px;
          border-radius: 14px;
          background: rgba(93,211,255,0.10);
          color: #5DD3FF;
          display: grid; place-items: center;
        }
        .lab-type { font-size: 19px; font-weight: 600; line-height: 1.2; }
        .lab-meta { font-size: 14px; color: #8A93A6; margin-top: 4px; }
        .lab-status {
          font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #4CAF50;
          background: rgba(76,175,80,0.12);
          border: 1px solid rgba(76,175,80,0.3);
          padding: 4px 10px;
          border-radius: 999px;
        }
      `}</style>
    </button>
  );
}

// ---------- Pill / tag ----------
function Tag({ children, color = "blue" }) {
  const palette = {
    blue:  { bg: "rgba(30,144,255,0.12)", bd: "rgba(30,144,255,0.35)", fg: "#BFE0FF" },
    green: { bg: "rgba(76,175,80,0.14)", bd: "rgba(76,175,80,0.4)", fg: "#7DDB85" },
    amber: { bg: "rgba(255,181,71,0.12)", bd: "rgba(255,181,71,0.4)", fg: "#FFD479" },
    gray:  { bg: "rgba(255,255,255,0.06)", bd: "rgba(255,255,255,0.16)", fg: "#C7CCD9" },
    red:   { bg: "rgba(255,107,107,0.12)", bd: "rgba(255,107,107,0.4)", fg: "#FFA9A9" },
  }[color] || palette?.blue;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "5px 12px",
      borderRadius: 999,
      background: palette.bg,
      border: `1px solid ${palette.bd}`,
      color: palette.fg,
      fontSize: 12, fontWeight: 600,
      letterSpacing: "0.06em", textTransform: "uppercase",
    }}>{children}</span>
  );
}

// ---------- Step header ----------
function StepHeader({ step, total, label, onBack, onCancel }) {
  const _t = (k, v) => (typeof tt === 'function' ? tt(k, v) : k);
  return (
    <div className="step-header">
      <div className="step-left">
        {onBack && (
          <button className="btn btn-ghost" onClick={onBack}>
            <Icon name="arrow-left" size={16} /> {_t('step.back')}
          </button>
        )}
      </div>
      <div className="step-center">
        <div className="step-counter">{_t('step.of', { step, total })}</div>
        <div className="step-label">{label}</div>
      </div>
      <div className="step-right">
        {onCancel && (
          <button className="btn btn-danger-ghost" onClick={onCancel}>
            <Icon name="x" size={14} /> {_t('step.cancel')}
          </button>
        )}
      </div>
      <style>{`
        .step-header {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 24px;
          margin-bottom: 24px;
        }
        .step-left { justify-self: start; }
        .step-right { justify-self: end; }
        .step-center { text-align: center; }
        .step-counter {
          font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
          color: #5A6275;
          font-weight: 600;
        }
        .step-label {
          font-size: 13px;
          color: #8A93A6;
          margin-top: 4px;
        }
      `}</style>
    </div>
  );
}

// ---------- Modal ----------
function Modal({ open, onClose, title, children, maxWidth = 560 }) {
  if (!open) return null;
  return (
    <div className="modal-bg fade-in" onClick={onClose}>
      <div className="modal-panel scale-in" style={{ maxWidth }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3>{title}</h3>
          <button className="modal-close" onClick={onClose}><Icon name="x" size={20}/></button>
        </div>
        <div className="modal-body">{children}</div>
      </div>
      <style>{`
        .modal-bg {
          position: absolute; inset: 0; z-index: 100;
          background: rgba(5,8,16,0.7);
          backdrop-filter: blur(8px);
          display: grid; place-items: center;
          padding: 40px;
        }
        .modal-panel {
          width: 100%;
          background: linear-gradient(180deg, #131A2E, #0E1424);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 24px;
          overflow: hidden;
          box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
        }
        .modal-head {
          display: flex; align-items: center; justify-content: space-between;
          padding: 24px 28px;
          border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .modal-head h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
        .modal-close {
          appearance: none; background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.1); color: white;
          width: 36px; height: 36px; border-radius: 10px;
          cursor: pointer; display: grid; place-items: center;
        }
        .modal-close:hover { background: rgba(255,255,255,0.12); }
        .modal-body { padding: 24px 28px 28px; }
      `}</style>
    </div>
  );
}

// ---------- AdminAccessButton: pantalla completa protegida por PIN ----------
const ADMIN_PIN = '0963'; // PIN de acceso al modo administrador

function AdminAccessButton() {
  const [showModal, setShowModal] = React.useState(false);
  const [pin, setPin] = React.useState('');
  const [error, setError] = React.useState('');
  const [isFullscreen, setIsFullscreen] = React.useState(!!document.fullscreenElement);

  React.useEffect(() => {
    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', onChange);
    return () => document.removeEventListener('fullscreenchange', onChange);
  }, []);

  const handleKey = (k) => {
    if (k === 'del') { setPin(p => p.slice(0, -1)); setError(''); return; }
    if (pin.length >= 4) return;
    const next = pin + k;
    setPin(next);
    if (next.length === 4) {
      if (next === ADMIN_PIN) {
        setError('');
        setPin('');
        setShowModal(false);
        // Toggle fullscreen
        if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen().catch(() => {});
        } else {
          document.exitFullscreen().catch(() => {});
        }
      } else {
        setError(typeof tt === 'function' ? tt('admin.pin.err') : 'PIN');
        setTimeout(() => { setPin(''); setError(''); }, 900);
      }
    }
  };

  const dots = Array.from({ length: 4 }, (_, i) => pin.length > i ? '●' : '○');

  return (
    <>
      {/* Botón flotante — esquina inferior derecha, fuera del kiosk escalado */}
      <button
        onClick={() => { setShowModal(true); setPin(''); setError(''); }}
        style={{
          position: 'fixed', bottom: 16, right: 16, zIndex: 9999,
          width: 44, height: 44, borderRadius: 12,
          background: 'rgba(255,255,255,0.07)',
          border: '1px solid rgba(255,255,255,0.15)',
          color: 'rgba(255,255,255,0.5)',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, transition: 'all .2s',
        }}
        onMouseOver={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.15)'; e.currentTarget.style.color = '#fff'; }}
        onMouseOut={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; e.currentTarget.style.color = 'rgba(255,255,255,0.5)'; }}
        title={(typeof tt === 'function' ? tt('admin.btn') : 'Admin')}
      >
        {isFullscreen ? '⛶' : '⛶'}
      </button>

      {/* Modal PIN */}
      {showModal && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 99999,
          background: 'rgba(5,8,16,0.92)',
          backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            background: '#0F1629', border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 24, padding: '36px 32px', width: 320,
            boxShadow: '0 32px 64px rgba(0,0,0,0.6)',
          }}>
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <div style={{ fontSize: 32, marginBottom: 12 }}>🔒</div>
              <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#f0f4ff' }}>{typeof tt === 'function' ? tt('admin.title') : 'Admin'}</h3>
              <p style={{ margin: '6px 0 0', fontSize: 13, color: '#7a8bad' }}>
                {typeof tt === 'function' ? tt(isFullscreen ? 'admin.pin.exit' : 'admin.pin.enter') : ''}
              </p>
            </div>

            {/* PIN display */}
            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 20 }}>
              {dots.map((d, i) => (
                <span key={i} style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: pin.length > i ? 'rgba(30,144,255,0.2)' : 'rgba(255,255,255,0.04)',
                  border: `1px solid ${pin.length > i ? '#1E90FF' : 'rgba(255,255,255,0.1)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 20, color: pin.length > i ? '#5DD3FF' : '#4d6080',
                  transition: 'all .15s',
                }}>{d}</span>
              ))}
            </div>

            {error && (
              <p style={{ textAlign: 'center', color: '#FF6B6B', fontSize: 13, marginBottom: 12 }}>{error}</p>
            )}

            {/* Teclado numérico */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {['1','2','3','4','5','6','7','8','9','del','0',''].map((k, i) => {
                if (k === '') return <div key={i} />;
                return (
                  <button key={i} onClick={() => handleKey(k)} style={{
                    padding: '14px 0', borderRadius: 12, border: '1px solid rgba(255,255,255,0.1)',
                    background: k === 'del' ? 'rgba(255,107,107,0.1)' : 'rgba(255,255,255,0.04)',
                    color: k === 'del' ? '#FF6B6B' : '#f0f4ff',
                    fontSize: k === 'del' ? 16 : 20, fontWeight: 700, cursor: 'pointer',
                    transition: 'background .15s',
                  }}
                  onMouseOver={e => e.currentTarget.style.background = 'rgba(30,144,255,0.15)'}
                  onMouseOut={e => e.currentTarget.style.background = k === 'del' ? 'rgba(255,107,107,0.1)' : 'rgba(255,255,255,0.04)'}
                  >
                    {k === 'del' ? '⌫' : k}
                  </button>
                );
              })}
            </div>

            <button
              onClick={() => setShowModal(false)}
              style={{
                marginTop: 16, width: '100%', padding: '10px 0',
                background: 'transparent', border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: 10, color: '#7a8bad', fontSize: 13, cursor: 'pointer',
              }}
            >
              {typeof tt === 'function' ? tt('step.cancel') : 'Cancel'}
            </button>
          </div>
        </div>
      )}
    </>
  );
}

// ---------- Make available globally ----------
Object.assign(window, {
  Icon, TotemLogo, NumericKeypad, DniDisplay, ActionCard,
  AppointmentCard, LabOrderCard, Tag, StepHeader, Modal, AdminAccessButton,
});