// Settings — minimal placeholder with SOFIA MCP config sections.

function SettingsScreen() {
  const sections = [
    {
      title: 'Organización',
      kicker: 'SOLUCERSA · cuenta corporativa',
      items: [
        { label: 'Plan', value: 'Enterprise · 14 seats' },
        { label: 'Workspace', value: 'SOLUCERSA · HR Operations' },
        { label: 'Región de datos', value: 'us-east-1 (replicación a sa-east-1)' },
        { label: 'SLA', value: '99.95% uptime · soporte 24/7' },
      ],
    },
    {
      title: 'SOFIA MCP',
      kicker: 'Producto y conectores',
      items: [
        { label: 'Modelo de match', value: 'sofia-match v3.2 · last retrain 2026-05-13' },
        { label: 'SOFIA Call', value: 'Activo · 142 llamadas / semana', tone: 'emerald' },
        { label: 'SOFIA Chat', value: 'Activo · WhatsApp Business API · 3 números', tone: 'emerald' },
        { label: 'Portal público', value: 'jobs.solucersa.com (custom domain)' },
      ],
    },
    {
      title: 'Seguridad',
      kicker: 'Cumplimiento y acceso',
      items: [
        { label: 'SSO', value: 'Microsoft Entra ID (Azure AD) · activo', tone: 'emerald' },
        { label: 'MFA', value: 'Obligatorio para todos los operadores', tone: 'emerald' },
        { label: 'Audit log', value: 'Retención 24 meses · export S3 disponible' },
        { label: 'Encriptación', value: 'AES-256 en reposo · TLS 1.3 en tránsito' },
      ],
    },
  ];

  return (
    <Page id="settings">
      <div className="mb-5">
        <div className="text-[11px] uppercase tracking-[0.18em] text-ink-500 mb-1.5 flex items-center gap-2 font-medium">
          <Icon.Settings size={12} /> Configuración
        </div>
        <h1 className="text-2xl font-semibold tracking-tight text-ink-900">Ajustes de la cuenta</h1>
        <p className="text-sm text-ink-500 mt-1">Producto: SOFIA MCP · Operador: SOLUCERSA · Plan Enterprise.</p>
      </div>

      <div className="grid grid-cols-2 gap-5">
        {sections.map((s) => (
          <Card key={s.title} className="p-5">
            <div className="mb-4">
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">{s.kicker}</div>
              <h3 className="text-base font-semibold text-ink-900">{s.title}</h3>
            </div>
            <div className="space-y-3">
              {s.items.map((it) => (
                <div key={it.label} className="flex items-center justify-between gap-4">
                  <div className="text-sm text-ink-500">{it.label}</div>
                  <div className={`text-sm text-right ${it.tone === 'emerald' ? 'text-emerald-700 font-medium' : 'text-ink-900'}`}>
                    {it.tone === 'emerald' && <Icon.CheckCircle size={12} className="inline mr-1 align-[-2px]" />}
                    {it.value}
                  </div>
                </div>
              ))}
            </div>
          </Card>
        ))}

        {/* Team */}
        <Card className="p-5 col-span-2">
          <div className="flex items-center justify-between mb-4">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 font-medium">Equipo</div>
              <h3 className="text-base font-semibold text-ink-900">Operadores activos</h3>
            </div>
            <Button size="sm" variant="default" icon={<Icon.UserPlus size={12} />}>Invitar</Button>
          </div>
          <div className="grid grid-cols-3 gap-3">
            {[
              { name: 'Marisol Pineda', role: 'Senior Operator · Lead', color: 'from-indigo-500 to-violet-400' },
              { name: 'Carlos Reyes',   role: 'Operator · Cobranzas', color: 'from-emerald-500 to-cyan-400' },
              { name: 'Lucía Aguilar',  role: 'Operator · Ventas', color: 'from-rose-500 to-orange-400' },
              { name: 'Rodrigo Mejía',  role: 'Operator · BPO US', color: 'from-amber-500 to-pink-400' },
              { name: 'Daniela Cruz',   role: 'Coordinator · Quality', color: 'from-sky-500 to-indigo-400' },
              { name: 'Esteban López',  role: 'Operator · Banca', color: 'from-violet-500 to-fuchsia-400' },
            ].map((p) => (
              <div key={p.name} className="flex items-center gap-3 p-3 rounded-lg border border-line bg-white">
                <Avatar name={p.name} color={p.color} size={36} online />
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-ink-900 truncate">{p.name}</div>
                  <div className="text-[11px] text-ink-500 truncate">{p.role}</div>
                </div>
                <IconButton size="sm" variant="ghost" icon={<Icon.More size={12} />} />
              </div>
            ))}
          </div>
        </Card>
      </div>
    </Page>
  );
}

window.SettingsScreen = SettingsScreen;