// Técnicos — Step 3: AI dispatches outbound requests to technicians/partners
// Three sections: pending dispatch (centerpiece) · active dispatches · directory

const TECH_TABS = [
  { id: 'dispatch',  label: 'Pendiente de asignar' },
  { id: 'active',    label: 'Dispatches activos' },
  { id: 'directory', label: 'Directorio' },
];

const TechniciansPage = ({ onNav }) => {
  const D = window.BW_DATA;
  const [tab, setTab] = useState('dispatch');
  const [scope, setScope] = useState('all'); // all | internal | external
  const [dispatchModal, setDispatchModal] = useState(null); // { ticket, tech }
  const [sentDispatches, setSentDispatches] = useState([]); // tech IDs sent in this session

  const techs = D.TECHNICIANS.filter(t =>
    scope === 'all' || t.type === scope
  );

  const pendingTickets = D.PM_TICKETS.filter(t => t.state === 'open');

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20, gap: 24 }}>
        <div>
          <div className="brand-eyebrow" style={{ marginBottom: 10 }}>Operaciones · Red de servicios</div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 28, margin: 0, letterSpacing:'-0.02em', color:'var(--brand-navy)', lineHeight: 1.1 }}>
            Técnicos
          </h1>
          <div className="accent-line" style={{ marginTop: 14 }}/>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)', marginTop: 14 }}>
            {D.TECHNICIANS.length} partners · {D.TECHNICIANS.filter(t=>t.status==='available').length} disponibles ahora · {pendingTickets.length} tickets sin asignar
          </div>
        </div>
        <button className="btn btn-primary btn-md"><I.Plus size={14}/> Añadir técnico</button>
      </div>

      {/* Sub-tabs */}
      <div style={{ display:'flex', gap: 4, borderBottom:'1px solid var(--color-border)', marginBottom: 24 }}>
        {TECH_TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding:'10px 16px', background:'none', border: 0,
            borderBottom: tab === t.id ? '2px solid var(--color-accent)' : '2px solid transparent',
            color: tab === t.id ? 'var(--color-accent)' : 'var(--color-text-secondary)',
            fontSize: 13.5, fontWeight: 600, cursor:'pointer', marginBottom:-1,
          }}>{t.label}</button>
        ))}
      </div>

      {/* ─── PENDING DISPATCH ─── */}
      {tab === 'dispatch' && (
        <PendingDispatch
          tickets={pendingTickets}
          techs={D.TECHNICIANS}
          sentIds={sentDispatches}
          onSend={(ticket, tech) => setDispatchModal({ ticket, tech })}
        />
      )}

      {/* ─── ACTIVE DISPATCHES ─── */}
      {tab === 'active' && (
        <div className="card" style={{ overflow:'hidden' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 90 }}>Dispatch</th>
                <th style={{ width: 100 }}>Ticket</th>
                <th>Inquilino · Incidencia</th>
                <th style={{ width: 220 }}>Técnico</th>
                <th style={{ width: 90 }}>Canal</th>
                <th style={{ width: 120 }}>Enviado</th>
                <th style={{ width: 170 }}>ETA</th>
                <th style={{ width: 130 }}>Estado</th>
              </tr>
            </thead>
            <tbody>
              {D.DISPATCHES.map(d => {
                const stateMap = {
                  sent:      { cls: 'amber',  label: 'Enviado' },
                  confirmed: { cls: 'green',  label: 'Confirmado' },
                  declined:  { cls: 'red',    label: 'Declinado' },
                  read:      { cls: 'teal',   label: 'Leído' },
                };
                const st = stateMap[d.state] || stateMap.sent;
                return (
                  <tr key={d.id}>
                    <td><span className="mono" style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>{d.id}</span></td>
                    <td><span className="mono" style={{ fontSize: 12, color:'var(--color-accent)', cursor:'pointer' }} onClick={() => onNav && onNav('tickets')}>{d.ticket}</span></td>
                    <td>
                      <div style={{ fontWeight: 500, color:'var(--color-text-primary)' }}>{d.tenant}</div>
                      <div style={{ fontSize: 12, color:'var(--color-text-muted)' }}>{d.issue}</div>
                    </td>
                    <td><div style={{ fontSize: 13 }}>{d.technician}</div></td>
                    <td>
                      <span className={'ch ' + (d.channel==='whatsapp'?'wa':d.channel==='phone'?'ph':'em')} style={{ padding:'2px 8px' }}>
                        {d.channel==='whatsapp' ? <I.WhatsApp size={11}/> : d.channel==='phone' ? <I.Phone size={11}/> : <I.Mail size={11}/>}
                      </span>
                    </td>
                    <td><span className="num">{d.sentAt}</span></td>
                    <td>{d.eta}</td>
                    <td><span className={'badge ' + st.cls + ' dot'} style={{ fontSize: 11 }}>{st.label}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {/* ─── DIRECTORY ─── */}
      {tab === 'directory' && (
        <>
          <div style={{ display:'flex', gap: 10, marginBottom: 16, alignItems:'center' }}>
            <div className="seg">
              {[['all','Todos'],['internal','En plantilla'],['external','Agencias externas']].map(([id, l]) => (
                <button key={id} className={scope===id?'active':''} onClick={()=>setScope(id)}>{l}</button>
              ))}
            </div>
            <div style={{ position:'relative', flex:'0 1 280px' }}>
              <I.Search size={14} style={{ position:'absolute', left: 12, top: '50%', transform:'translateY(-50%)', color:'var(--color-text-muted)' }} />
              <input className="input input-sm" placeholder="Buscar por nombre, especialidad, zona…" style={{ paddingLeft: 36 }} />
            </div>
          </div>
          <div className="card" style={{ overflow:'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 100 }}>ID</th>
                  <th>Empresa · contacto</th>
                  <th style={{ width: 220 }}>Especialidades</th>
                  <th style={{ width: 140 }}>Zona</th>
                  <th style={{ width: 70 }}>Rating</th>
                  <th style={{ width: 100 }}>Completados</th>
                  <th style={{ width: 90 }}>SLA</th>
                  <th style={{ width: 110 }}>Estado</th>
                </tr>
              </thead>
              <tbody>
                {techs.map(t => (
                  <tr key={t.id}>
                    <td><span className="mono" style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>{t.id}</span></td>
                    <td>
                      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                        <div style={{ fontWeight: 500 }}>{t.company}</div>
                        {t.preferred && (
                          <span style={{ fontSize: 9, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase', padding:'1px 6px', borderRadius: 4, background:'var(--color-accent-light)', color:'var(--color-accent)' }}>Preferido</span>
                        )}
                        {t.type === 'internal' && (
                          <span style={{ fontSize: 9, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase', padding:'1px 6px', borderRadius: 4, background:'var(--color-success-light)', color:'var(--color-success)' }}>Plantilla</span>
                        )}
                      </div>
                      <div style={{ fontSize: 12, color:'var(--color-text-muted)' }}>{t.contact} · {t.phone}</div>
                    </td>
                    <td>
                      <div style={{ display:'flex', gap: 4, flexWrap:'wrap' }}>
                        {t.specialties.map(s => (
                          <span key={s} style={{ fontSize: 11, padding:'1px 7px', borderRadius: 4, background:'var(--color-surface-2)', color:'var(--color-text-secondary)' }}>{s}</span>
                        ))}
                      </div>
                    </td>
                    <td><span style={{ fontSize: 12.5, color:'var(--color-text-secondary)' }}>{t.zone}</span></td>
                    <td>
                      <span style={{ display:'inline-flex', alignItems:'center', gap: 4, fontFamily:'var(--font-mono)', fontWeight: 600, fontSize: 13 }}>
                        <I.Star size={12} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>{t.rating}
                      </span>
                    </td>
                    <td><span className="num">{t.completed}</span></td>
                    <td><span className="num">{t.slaMin}m</span></td>
                    <td>
                      <span className={'badge ' + (t.status === 'available' ? 'green' : 'amber') + ' dot'} style={{ fontSize: 11 }}>
                        {t.status === 'available' ? 'Disponible' : 'Ocupado'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}

      {/* Dispatch modal — AI-drafted outbound message */}
      {dispatchModal && (
        <DispatchModal
          ticket={dispatchModal.ticket}
          tech={dispatchModal.tech}
          onClose={() => setDispatchModal(null)}
          onSent={() => {
            setSentDispatches(prev => [...prev, dispatchModal.ticket.id + '-' + dispatchModal.tech.id]);
            setDispatchModal(null);
          }}
        />
      )}
    </div>
  );
};

// ─── Pending dispatch — ticket cards with recommended technicians ───
const PendingDispatch = ({ tickets, techs, sentIds, onSend }) => {
  const D = window.BW_DATA;

  if (tickets.length === 0) {
    return (
      <div style={{ padding:'60px 20px', textAlign:'center', color:'var(--color-text-muted)' }}>
        <I.Check size={32} style={{ color:'var(--color-success)', marginBottom: 12 }}/>
        <div style={{ fontSize: 15, fontWeight: 500 }}>Todas las solicitudes están asignadas a un técnico.</div>
      </div>
    );
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
      {tickets.map(ticket => {
        const cat = (D.PM_CATEGORIES && D.PM_CATEGORIES[ticket.category]) || { color:'var(--color-text-muted)', bg:'var(--color-surface-2)', icon:'Sparkle' };
        const CatIc = I[cat.icon] || I.Sparkle;
        // Match technicians whose specialties intersect with this category
        const matched = techs.filter(t =>
          t.specialties.some(s => s === ticket.category || s.toLowerCase().includes(ticket.category.toLowerCase()))
        ).sort((a, b) => (b.preferred?1:0) - (a.preferred?1:0) || b.rating - a.rating);

        return (
          <div key={ticket.id} className="card">
            {/* Ticket header */}
            <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--color-border)', display:'flex', alignItems:'flex-start', gap: 14 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, flex:'0 0 40px',
                background: cat.bg, color: cat.color,
                display:'grid', placeItems:'center',
              }}>
                <CatIc size={20}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                  <span className="mono" style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>{ticket.id}</span>
                  <span style={{
                    fontSize: 9.5, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase',
                    padding:'2px 6px', borderRadius: 4,
                    background: ticket.priority==='high'?'var(--color-danger-light)':ticket.priority==='medium'?'var(--color-warning-light)':'var(--color-surface-2)',
                    color:     ticket.priority==='high'?'var(--color-danger)':     ticket.priority==='medium'?'var(--color-warning)':     'var(--color-text-secondary)',
                  }}>{ticket.priority}</span>
                  <span style={{ fontSize: 12, color:'var(--color-text-muted)' }}>· {ticket.last}</span>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, color:'var(--color-text-primary)', marginTop: 4 }}>{ticket.issue}</div>
                <div style={{ fontSize: 13, color:'var(--color-text-secondary)', marginTop: 2 }}>{ticket.tenant} · {ticket.unit}</div>
                <div style={{ display:'flex', gap: 6, marginTop: 8, flexWrap:'wrap' }}>
                  {ticket.symptoms.slice(0, 3).map((s, i) => (
                    <span key={i} style={{ fontSize: 11, padding:'2px 8px', borderRadius: 999, background:'var(--color-surface-2)', color:'var(--color-text-secondary)' }}>{s}</span>
                  ))}
                </div>
              </div>
              <div style={{ flex:'0 0 auto', textAlign:'right' }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--color-text-muted)' }}>Recomendado</div>
                <div style={{ fontSize: 13, fontWeight: 500, color:'var(--color-text-primary)', marginTop: 4 }}>{ticket.recommendedSpecialty}</div>
                <div style={{ fontSize: 12, color:'var(--color-text-muted)', marginTop: 2 }}>{matched.length} matches</div>
              </div>
            </div>

            {/* Technician matches */}
            <div>
              {matched.length === 0 && (
                <div style={{ padding:'24px', textAlign:'center', color:'var(--color-text-muted)', fontSize: 13 }}>
                  Sin técnicos disponibles para esta categoría.
                </div>
              )}
              {matched.map((tech, i) => {
                const sent = sentIds.includes(ticket.id + '-' + tech.id);
                return (
                  <div key={tech.id} style={{
                    padding:'14px 20px',
                    borderTop: i ? '1px solid var(--color-border)' : 'none',
                    display:'flex', alignItems:'center', gap: 14,
                  }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                        <span style={{ fontWeight: 600, fontSize: 14 }}>{tech.company}</span>
                        {tech.preferred && (
                          <span style={{ fontSize: 9, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase', padding:'1px 6px', borderRadius: 4, background:'var(--color-accent-light)', color:'var(--color-accent)' }}>Preferido</span>
                        )}
                        {tech.type === 'internal' && (
                          <span style={{ fontSize: 9, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase', padding:'1px 6px', borderRadius: 4, background:'var(--color-success-light)', color:'var(--color-success)' }}>Plantilla</span>
                        )}
                        <span className={'badge ' + (tech.status==='available'?'green':'amber') + ' dot'} style={{ fontSize: 10.5 }}>
                          {tech.status==='available'?'Disponible':'Ocupado'}
                        </span>
                      </div>
                      <div style={{ fontSize: 12, color:'var(--color-text-muted)', marginTop: 2 }}>
                        {tech.contact} · {tech.zone} · {tech.rate}
                      </div>
                    </div>
                    <div style={{ display:'flex', gap: 16, alignItems:'center', fontSize: 12.5, color:'var(--color-text-secondary)' }}>
                      <div style={{ textAlign:'right' }}>
                        <div style={{ fontSize: 10.5, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>Rating</div>
                        <div style={{ display:'flex', alignItems:'center', gap: 3, justifyContent:'flex-end', fontFamily:'var(--font-mono)', fontWeight: 600 }}>
                          <I.Star size={11} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>{tech.rating}
                        </div>
                      </div>
                      <div style={{ textAlign:'right' }}>
                        <div style={{ fontSize: 10.5, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>SLA</div>
                        <div className="num" style={{ fontWeight: 600 }}>{tech.slaMin}m</div>
                      </div>
                    </div>
                    {sent ? (
                      <button className="btn btn-sm" disabled style={{ background:'var(--color-success-light)', color:'var(--color-success)', borderColor:'transparent', cursor:'default' }}>
                        <I.Check size={13}/> Enviada
                      </button>
                    ) : (
                      <button
                        className="btn btn-primary btn-sm"
                        onClick={() => onSend(ticket, tech)}
                        disabled={tech.status !== 'available'}
                        style={tech.status !== 'available' ? { opacity: 0.5, cursor:'not-allowed' } : {}}
                      >
                        <I.Sparkle size={13}/> Enviar solicitud IA
                      </button>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ─── Dispatch modal — preview AI-drafted message before sending ───
const DispatchModal = ({ ticket, tech, onClose, onSent }) => {
  const [channel, setChannel] = useState('whatsapp');
  const [draft, setDraft] = useState(() => generateDraft(ticket, tech, 'whatsapp'));
  const [sending, setSending] = useState(false);

  // Regenerate when channel changes (only if user hasn't manually edited)
  const [pristine, setPristine] = useState(true);
  useEffect(() => {
    if (pristine) setDraft(generateDraft(ticket, tech, channel));
  }, [channel]);

  const handleSend = () => {
    setSending(true);
    setTimeout(() => { onSent(); }, 600);
  };

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset: 0, background:'rgba(15,23,42,.4)',
      zIndex: 90, display:'grid', placeItems:'center',
      animation:'fadeDown .15s ease-out',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 600, maxWidth:'90vw', maxHeight:'90vh', overflow:'auto',
        background:'white', borderRadius: 14,
        boxShadow:'0 24px 64px -16px rgba(15,23,42,.3)',
      }}>
        {/* Header */}
        <div style={{ padding:'18px 24px', borderBottom:'1px solid var(--color-border)', display:'flex', alignItems:'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, background:'var(--color-accent-light)', color:'var(--color-accent)', display:'grid', placeItems:'center' }}>
            <I.Sparkle size={18}/>
          </div>
          <div style={{ flex: 1 }}>
            <div className="brand-eyebrow" style={{ marginBottom: 2 }}>Mensaje generado por IA</div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Enviar a {tech.company}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.X size={16}/></button>
        </div>

        {/* Recap */}
        <div style={{ padding:'14px 24px', background:'var(--color-surface)', display:'flex', alignItems:'center', gap: 16, fontSize: 12.5, color:'var(--color-text-secondary)', borderBottom:'1px solid var(--color-border)' }}>
          <span><strong style={{ color:'var(--color-text-primary)' }}>{ticket.id}</strong> · {ticket.issue}</span>
          <span>·</span>
          <span>{ticket.tenant} · {ticket.unit}</span>
        </div>

        {/* Channel switcher */}
        <div style={{ padding:'16px 24px 0', display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ fontSize: 12, color:'var(--color-text-muted)', fontWeight: 500 }}>Canal:</span>
          {[['whatsapp','WhatsApp',I.WhatsApp],['email','Email',I.Mail],['phone','SMS/Llamada',I.Phone]].map(([id, l, Ic]) => (
            <button key={id} onClick={()=>setChannel(id)} style={{
              padding:'5px 10px', borderRadius: 6,
              border: channel===id ? '1px solid var(--color-accent)' : '1px solid var(--color-border)',
              background: channel===id ? 'var(--color-accent-light)' : 'white',
              color: channel===id ? 'var(--color-accent)' : 'var(--color-text-secondary)',
              fontSize: 12, fontWeight: 500, cursor:'pointer', display:'inline-flex', alignItems:'center', gap: 5,
            }}>
              <Ic size={12}/> {l}
            </button>
          ))}
          {!pristine && (
            <button onClick={() => { setDraft(generateDraft(ticket, tech, channel)); setPristine(true); }} style={{
              marginLeft:'auto', padding:'5px 10px', borderRadius: 6,
              border:'1px solid var(--color-border)', background:'white',
              color:'var(--color-accent)', fontSize: 12, fontWeight: 500, cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap: 5,
            }}>
              <I.Refresh size={12}/> Regenerar
            </button>
          )}
        </div>

        {/* Message body */}
        <div style={{ padding:'16px 24px' }}>
          <div style={{ fontSize: 11, fontWeight: 600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom: 6 }}>Mensaje</div>
          <textarea
            value={draft}
            onChange={e => { setDraft(e.target.value); setPristine(false); }}
            rows={10}
            style={{
              width:'100%', padding:'12px 14px',
              border:'1px solid var(--color-border-strong)', borderRadius: 10,
              fontFamily:'inherit', fontSize: 13.5, lineHeight: 1.55,
              color:'var(--color-text-primary)',
              resize:'vertical', outline:'none',
              background:'var(--color-surface)',
            }}/>
          <div style={{ fontSize: 11.5, color:'var(--color-text-muted)', marginTop: 6, display:'flex', alignItems:'center', gap: 6 }}>
            <I.Info size={12}/> El mensaje se enviará desde {channel === 'whatsapp' ? 'WhatsApp Business +34 612 11 02 00' : channel === 'email' ? 'tecnicos@blueways.es' : 'SMS · Twilio'}.
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--color-border)', display:'flex', justifyContent:'space-between', alignItems:'center', background:'var(--color-surface)' }}>
          <span style={{ fontSize: 12, color:'var(--color-text-muted)' }}>
            El técnico recibirá un enlace para confirmar disponibilidad.
          </span>
          <div style={{ display:'flex', gap: 8 }}>
            <button className="btn btn-md" onClick={onClose}>Cancelar</button>
            <button className="btn btn-primary btn-md" onClick={handleSend} disabled={sending}>
              {sending ? <><I.Refresh size={14}/> Enviando…</> : <><I.Send size={14}/> Enviar ahora</>}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── Draft generator (mock LLM output) ───
function generateDraft(ticket, tech, channel) {
  const firstName = tech.contact.split(' ')[0];
  if (channel === 'whatsapp') {
    return `Hola ${firstName}, soy el asistente de Blueways (Ementil).\n\nTenemos una solicitud de servicio:\n\n• Cliente: ${ticket.tenant}\n• Dirección: ${ticket.unit} (${ticket.property})\n• Incidencia: ${ticket.issue}\n• Categoría: ${ticket.category} · ${ticket.subcategory}\n• Síntomas: ${ticket.symptoms.join(', ')}\n• Prioridad: ${ticket.priority.toUpperCase()} (${ticket.urgencyReason})\n\n¿Puedes confirmar disponibilidad y franja estimada de llegada?\nResponde SI / NO o con la franja propuesta.\n\nRef. interna: ${ticket.id}`;
  }
  if (channel === 'email') {
    return `Asunto: Solicitud de servicio ${ticket.id} · ${ticket.category}\n\nEstimado/a ${firstName},\n\nLes contactamos desde Blueways (Ementil Property Care) para asignar un servicio:\n\n— Cliente: ${ticket.tenant}\n— Inmueble: ${ticket.unit} (${ticket.property})\n— Incidencia: ${ticket.issue}\n— Subcategoría: ${ticket.subcategory}\n— Componente: ${ticket.component}\n— Síntomas: ${ticket.symptoms.join('; ')}\n— Prioridad: ${ticket.priority.toUpperCase()} (${ticket.urgencyReason})\n\nLes agradeceríamos confirmar disponibilidad y franja estimada de llegada respondiendo a este email o por WhatsApp al +34 612 11 02 00.\n\nUn saludo,\nBlueways · Asistente de operaciones`;
  }
  return `Blueways · Solicitud ${ticket.id}\n${ticket.category} · ${ticket.priority.toUpperCase()}\n${ticket.tenant} · ${ticket.unit}\n"${ticket.issue}"\n\nConfirma disponibilidad respondiendo a este mensaje.`;
}

window.TechniciansPage = TechniciansPage;