// Administración del Tenant
const Admin = () => {
  const D = window.BW_DATA;
  const [tab, setTab] = useState('company');

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 13, color:'var(--color-text-secondary)' }}>Configuración del tenant Ementil Grupo Inmobiliario</div>
        <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 36, margin: '4px 0 0', letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>Administración</h1>
      </div>

      <div style={{ display:'flex', gap: 4, borderBottom:'1px solid var(--color-border)', marginBottom: 24 }}>
        {[['company','Empresa'],['users','Usuarios'],['notifications','Notificaciones'],['privacy','Privacidad y datos']].map(([id,l])=>(
          <button key={id} onClick={()=>setTab(id)} style={{ padding:'10px 16px', background:'none', border:0, borderBottom: tab===id?'2px solid var(--color-accent)':'2px solid transparent', color: tab===id?'var(--color-text-primary)':'var(--color-text-secondary)', fontSize: 14, fontWeight: 500, cursor:'pointer', marginBottom: -1 }}>{l}</button>
        ))}
      </div>

      {tab==='company' && <CompanyTab/>}
      {tab==='users' && <UsersTab D={D}/>}
      {tab==='notifications' && <NotificationsTab/>}
      {tab==='privacy' && <PrivacyTab/>}
    </div>
  );
};

const CompanyTab = () => (
  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, maxWidth: 1100 }}>
    <div className="card">
      <div className="card-head"><div className="card-title">Identidad de la empresa</div></div>
      <div className="card-body" style={{ display:'flex', flexDirection:'column', gap: 16 }}>
        <div>
          <label className="label-text">Logo corporativo</label>
          <div style={{ display:'flex', alignItems:'center', gap: 14, padding: 14, border:'1px dashed var(--color-border-strong)', borderRadius: 10 }}>
            <div style={{ width: 56, height: 56, borderRadius: 10, background:'var(--color-text-primary)', color:'white', display:'grid', placeItems:'center', fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 26 }}>IK</div>
            <div style={{ flex: 1, fontSize: 12.5, color:'var(--color-text-secondary)' }}>PNG/SVG · max 2MB · 256×256 mínimo</div>
            <button className="btn btn-sm"><I.Upload size={12}/> Subir</button>
          </div>
        </div>
        <FormRow label="Nombre comercial"><input className="input" defaultValue="Ementil Grupo Inmobiliario S.L."/></FormRow>
        <FormRow label="Razón social"><input className="input" defaultValue="Ementil Grupo Inmobiliario Sociedad Limitada"/></FormRow>
        <FormRow label="Dirección fiscal"><input className="input" defaultValue="C/ Génova 21, 4º · 28004 Madrid · España"/></FormRow>
      </div>
    </div>
    <div className="card">
      <div className="card-head"><div className="card-title">Datos fiscales y contacto</div></div>
      <div className="card-body" style={{ display:'flex', flexDirection:'column', gap: 16 }}>
        <FormRow label="CIF"><input className="input mono" defaultValue="B-87 124 902"/></FormRow>
        <FormRow label="Email de facturación"><input className="input mono" defaultValue="adrian@blueways.es"/></FormRow>
        <FormRow label="Teléfono"><input className="input mono" defaultValue="+34 91 198 04 12"/></FormRow>
        <FormRow label="Sitio web"><input className="input mono" defaultValue="https://www.blueways.es"/></FormRow>
        <div style={{ marginTop: 8, paddingTop: 16, borderTop:'1px solid var(--color-border)', display:'flex', justifyContent:'flex-end', gap: 8 }}>
          <button className="btn">Cancelar</button>
          <button className="btn btn-primary">Guardar cambios</button>
        </div>
      </div>
    </div>
  </div>
);

const UsersTab = ({ D }) => (
  <div className="card">
    <div className="card-head">
      <div><div className="card-title">Equipo</div><div className="card-sub">{D.TEAM.length} miembros · 1 administrador · 1 supervisor · 3 comerciales</div></div>
      <button className="btn btn-primary"><I.Plus size={14}/> Invitar usuario</button>
    </div>
    <table className="tbl">
      <thead><tr><th>Miembro</th><th>Rol</th><th>Estado</th><th>Última conexión</th><th></th></tr></thead>
      <tbody>
        {D.TEAM.map(u=>(
          <tr key={u.email}>
            <td>
              <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius:'50%', background: u.color, color:'white', display:'grid', placeItems:'center', fontWeight: 600, fontSize: 12 }}>{u.initials}</div>
                <div>
                  <div style={{ fontWeight: 500 }}>{u.name}</div>
                  <div className="mono" style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>{u.email}</div>
                </div>
              </div>
            </td>
            <td><span className={'badge ' + (u.role==='Administrador'?'blue':u.role==='Supervisor'?'amber':'')}>{u.role}</span></td>
            <td><span className="badge green dot">Activo</span></td>
            <td><span className="num muted">{u.last}</span></td>
            <td style={{ textAlign:'right' }}>
              <button className="btn btn-sm">Editar</button>
              <button className="btn btn-sm btn-danger" style={{ marginLeft: 6 }}>Revocar</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const NotificationsTab = () => {
  const [routes, setRoutes] = useState([
    { type:'HVAC',             dept:'Climatización',         emails:['hvac@blueways.es','climatec@partners.es'] },
    { type:'Fontanería',       dept:'Fontanería 24h',        emails:['fontaneria@blueways.es'] },
    { type:'Electrodoméstico', dept:'SAT electrodomésticos', emails:['sat@blueways.es','sara@blueways.es'] },
    { type:'Seguridad',        dept:'Cerrajería 24h',        emails:['urgencias@blueways.es'] },
  ]);
  const [generalMail, setGeneralMail] = useState('reportes@blueways.es');
  const [generalOn, setGeneralOn] = useState(true);

  const updateRoute = (i, patch) => setRoutes(r => r.map((x,idx)=> idx===i ? {...x, ...patch} : x));
  const removeEmail = (i, j) => updateRoute(i, { emails: routes[i].emails.filter((_,k)=>k!==j) });
  const addEmail = (i) => {
    const v = prompt('Nuevo email de contacto');
    if (v) updateRoute(i, { emails: [...routes[i].emails, v] });
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 16, maxWidth: 1100 }}>

      {/* Routing por categoría */}
      <div className="card">
        <div className="card-head" style={{ alignItems:'flex-start' }}>
          <div>
            <div className="card-title">Enrutado de solicitudes por categoría</div>
            <div className="card-sub">Cuando la IA identifica la categoría de una incidencia, la notificación llega al equipo técnico configurado.</div>
          </div>
          <button className="btn btn-sm"><I.Plus size={12}/> Añadir categoría</button>
        </div>

        <div style={{ padding: 0 }}>
          <div style={{ display:'grid', gridTemplateColumns:'180px 220px 1fr', gap: 0, padding:'10px 24px', borderBottom:'1px solid var(--color-border)', background:'var(--color-surface-2)', fontSize: 11.5, fontWeight: 600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'.04em' }}>
            <div>Categoría</div>
            <div>Equipo técnico</div>
            <div>Emails de contacto</div>
          </div>
          {routes.map((r, i) => (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'180px 220px 1fr', gap: 0, padding:'14px 24px', borderTop: i?'1px solid var(--color-border)':'none', alignItems:'center' }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius:'50%', background: leadTypeColor(r.type) }}/>
                <span style={{ fontWeight: 500 }}>{r.type}</span>
              </div>
              <input className="input" value={r.dept} onChange={e=>updateRoute(i, { dept: e.target.value })} style={{ height: 32, fontSize: 13 }}/>
              <div style={{ display:'flex', flexWrap:'wrap', gap: 6, padding:'0 12px' }}>
                {r.emails.map((em, j) => (
                  <span key={j} style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'4px 6px 4px 10px', background:'var(--color-surface)', border:'1px solid var(--color-border)', borderRadius: 6, fontSize: 12.5, fontFamily:'var(--font-mono)' }}>
                    {em}
                    <button onClick={()=>removeEmail(i, j)} className="icon-btn" style={{ width: 18, height: 18 }} title="Quitar"><I.X size={11}/></button>
                  </span>
                ))}
                <button onClick={()=>addEmail(i)} className="btn btn-sm" style={{ padding:'4px 8px' }}><I.Plus size={11}/> Email</button>
              </div>
            </div>
          ))}
        </div>

        <div style={{ borderTop:'1px solid var(--color-border)', padding:'16px 24px', background:'var(--color-surface-2)' }}>
          <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
            <Toggle on={generalOn}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>Email general (copia de todos los reportes)</div>
              <div style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>Recibe una copia de cada informe de cualificación, sea cual sea el tipo.</div>
            </div>
            <input className="input mono" value={generalMail} onChange={e=>setGeneralMail(e.target.value)} style={{ width: 280, height: 34 }}/>
          </div>
        </div>
      </div>
    </div>
  );
};

const leadTypeColor = (t) => {
  if (t==='HVAC')             return 'var(--color-inbound)';
  if (t==='Fontanería')       return 'var(--color-accent)';
  if (t==='Electrodoméstico') return 'var(--color-outbound)';
  if (t==='Seguridad')        return 'var(--color-danger)';
  return 'var(--color-text-muted)';
};

const PrivacyTab = () => (
  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, maxWidth: 1100 }}>
    <div className="card">
      <div className="card-head"><div className="card-title">Anexo de Protección de Datos (DPA)</div></div>
      <div className="card-body">
        <div style={{ display:'flex', alignItems:'center', gap: 14, padding: 14, background: 'var(--color-success-light)', borderRadius: 10, marginBottom: 14 }}>
          <I.Check size={20} style={{ color:'var(--color-success)' }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, color:'var(--color-success)' }}>DPA firmado y vigente</div>
            <div style={{ fontSize: 12.5, color:'var(--color-text-secondary)' }}>Firmado el 14 de marzo de 2026</div>
          </div>
          <button className="btn btn-sm"><I.Download size={12}/> PDF</button>
        </div>
        <div style={{ fontSize: 13, color:'var(--color-text-secondary)', lineHeight: 1.6 }}>
          El Anexo regula el tratamiento de datos de tus leads conforme al RGPD. Cualquier cambio del DPA será comunicado por email con 30 días de antelación.
        </div>
        <button className="btn" style={{ marginTop: 16 }}><I.Download size={14}/> Exportar todos mis datos</button>
      </div>
    </div>

    <div className="card" style={{ borderColor:'var(--color-danger)', borderWidth: 1 }}>
      <div className="card-head" style={{ borderColor:'var(--color-danger-light)' }}>
        <div>
          <div className="card-title" style={{ color:'var(--color-danger)' }}>Zona de peligro</div>
          <div className="card-sub">Acciones irreversibles sobre los datos del tenant</div>
        </div>
      </div>
      <div className="card-body" style={{ display:'flex', flexDirection:'column', gap: 12 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding: 14, border:'1px solid var(--color-border)', borderRadius: 10 }}>
          <div>
            <div style={{ fontWeight: 500 }}>Cancelar suscripción</div>
            <div style={{ fontSize: 12.5, color:'var(--color-text-secondary)', marginTop: 2 }}>Se mantendrán los datos durante 30 días, después se eliminan.</div>
          </div>
          <button className="btn btn-danger">Cancelar</button>
        </div>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding: 14, border:'1px solid var(--color-danger-light)', background:'var(--color-danger-light)', borderRadius: 10 }}>
          <div>
            <div style={{ fontWeight: 500, color:'var(--color-danger)' }}>Borrado completo (RGPD)</div>
            <div style={{ fontSize: 12.5, color:'var(--color-danger)', marginTop: 2 }}>Elimina de forma irreversible TODOS los datos del tenant.</div>
          </div>
          <button className="btn btn-danger">Solicitar borrado</button>
        </div>
      </div>
    </div>
  </div>
);

window.AdminPage = Admin;